@graineai/inapp-react-native 0.39.0 → 0.40.1

package/dist/theme.js

@@ -7,6 +7,20 @@ 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"];
+export const LOGO_PLATES = ["accent", "white"];
+export const LOGO_PLATE_WHITE = "#FFFFFF";
+export function normaliseLogoPlate(value) {
+    return value === "white" ? "white" : "accent";
+}
+export function logoBox(shape, size) {
+    const k = shape === "rounded-square" || shape === "square" ? 0.8 : 0.7;
+    return Math.max(1, Math.floor(size * k));
+}
+export function logoPlateLook(plate, colors, borderWidth = 1) {
+    return plate === "white"
+        ? { fill: LOGO_PLATE_WHITE, outline: { width: Math.max(1, borderWidth), color: colors.border } }
+        : { fill: colors.accent, outline: null };
+}
 const HEX6 = /^#?([0-9a-f]{6})$/i;
 const HEX3 = /^#?([0-9a-f]{3})$/i;
 export function normaliseHex(value) {
@@ -79,6 +93,8 @@ export const LAUNCHER_ICONS = [
     { 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" },
+    { id: "grain", label: "Grain", stroke: true, path: "M7.34 5.5H16.66M4.69 8.75H19.31M4 12H20M4.69 15.25H19.31M7.34 18.5H16.66" },
+    { id: "grain-voice", label: "Grain voice", stroke: true, path: "M8.5 5.5H15.5M5 8.75H19M7 12H17M3.5 15.25H20.5M8 18.5H16" },
 ];
 export const SDK_ICONS = {
     mic: { body: "M12 2.5a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 7 0V6A3.5 3.5 0 0 0 12 2.5z", lines: "M18.5 11.5a6.5 6.5 0 0 1-13 0M12 18v3.5" },
@@ -1878,10 +1894,735 @@ 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_DESKTOP_BUDDY, P_NEO_BRUTALISM, P_EDITORIAL, P_LUXURY, P_RETRO_TERMINAL, P_WARM_EARTHY, P_HIGH_CONTRAST];
+const P_SIGNATURE = {
+    id: "signature",
+    name: "Signature",
+    tagline: "Graine's own look — quiet greys, a slate-and-indigo voice, the grain.",
+    family: "graine",
+    inspiredBy: [
+        "Graine's design system, after Sarvam's (sarvam.ai/brand) — neutral surfaces #FCFCFC / #E6E6E6, ink #1F1F1F, slate #2A2C33, indigo #4250D5, a 0 0 40px ambient shadow, ease cubic-bezier(0.2,0,0,1) 350ms; the grain motif is Graine's own",
+    ],
+    font: {
+        body: "DM Sans",
+        heading: "Newsreader",
+        scale: { caption: 12, body: 15, title: 19, display: 30 },
+        weights: { body: 400, strong: 500, title: 400 },
+        letterSpacing: { body: 0, title: -0.015 },
+        lineHeight: { body: 1.5, title: 1.2 },
+    },
+    shape: { radius: { sm: 10, md: 16, lg: 24, xl: 32 }, borderWidth: 1, launcher: "circle" },
+    spacing: { unit: 4, cardPadding: 16, gap: 10 },
+    elevation: {
+        card: { y: 0, blur: 40, spread: 0, opacity: 0.06, color: "#000000" },
+        floating: { y: 12, blur: 40, spread: -8, opacity: 0.18, color: "#000000" },
+        hardOffset: null,
+    },
+    motion: { durationMs: 350, easing: "emphasized", bounce: 0 },
+    icons: { style: "outline", stroke: 1.75, launcher: "grain" },
+    glass: null,
+    bubbles: "filled",
+    colors: {
+        light: {
+            background: "#FCFCFC", surface: "#FFFFFF", surfaceRaised: "#F5F5F5", text: "#1F1F1F", textMuted: "#666666",
+            border: "#E6E6E6", accent: "#4250D5", onAccent: "#FFFFFF", success: "#496D21", warning: "#8F6418", danger: "#C43D2B",
+            userBubble: "#2A2C33", userBubbleText: "#FFFFFF", agentBubble: "#F0F0F0", agentBubbleText: "#1F1F1F", scrim: "#000000",
+        },
+        dark: {
+            background: "#141414", surface: "#1C1C1C", surfaceRaised: "#262626", text: "#F5F5F5", textMuted: "#A3A3A3",
+            border: "#333333", accent: "#81A0E9", onAccent: "#11115B", success: "#90C85B", warning: "#FFB94A", danger: "#EBA18F",
+            userBubble: "#E8EFFC", userBubbleText: "#11115B", agentBubble: "#262626", agentBubbleText: "#F5F5F5", scrim: "#000000",
+        },
+    },
+};
+const P_SWISS_GRID = {
+    "id": "swiss-grid",
+    "name": "Swiss Grid",
+    "tagline": "Black type on white, square corners and hairline rules, with Swiss red for the customer's own messages.",
+    "family": "modern",
+    "inspiredBy": [
+        "International Typographic Style (Swiss Style, 1950s)",
+        "Josef Müller-Brockmann, Grid Systems in Graphic Design (1981)",
+        "Swiss red, Pantone 485 C (#DA291C)"
+    ],
+    "font": {
+        "body": "Inter",
+        "heading": "Inter",
+        "scale": {
+            "caption": 12,
+            "body": 15,
+            "title": 21,
+            "display": 34
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 700
+        },
+        "letterSpacing": {
+            "body": -0.006,
+            "title": -0.022
+        },
+        "lineHeight": {
+            "body": 1.42,
+            "title": 1.12
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 0,
+            "md": 0,
+            "lg": 0,
+            "xl": 0
+        },
+        "borderWidth": 1,
+        "launcher": "square"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 8
+    },
+    "elevation": {
+        "card": null,
+        "floating": null,
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 160,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "sharp",
+        "stroke": 1.75,
+        "launcher": "audio-lines"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#FFFFFF",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#F3F3F3",
+            "text": "#111111",
+            "textMuted": "#545454",
+            "border": "#1A1A1A",
+            "accent": "#111111",
+            "onAccent": "#FFFFFF",
+            "success": "#1C7C3A",
+            "warning": "#9E5200",
+            "danger": "#DA291C",
+            "userBubble": "#DA291C",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#F3F3F3",
+            "agentBubbleText": "#111111",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#0A0A0A",
+            "surface": "#111111",
+            "surfaceRaised": "#1C1C1C",
+            "text": "#F5F5F5",
+            "textMuted": "#A8A8A8",
+            "border": "#D4D4D4",
+            "accent": "#F5F5F5",
+            "onAccent": "#0A0A0A",
+            "success": "#3DBA68",
+            "warning": "#F0A23B",
+            "danger": "#DA291C",
+            "userBubble": "#DA291C",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#1C1C1C",
+            "agentBubbleText": "#F5F5F5",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_BAUHAUS = {
+    "id": "bauhaus",
+    "name": "Bauhaus",
+    "tagline": "Circles and squares in the three primaries, set in geometric type on warm paper.",
+    "family": "expressive",
+    "inspiredBy": [
+        "Bauhaus school, Weimar and Dessau (1919–1933)",
+        "Kandinsky's 1923 colour–form questionnaire (yellow triangle, red square, blue circle)",
+        "Herbert Bayer's universal alphabet (1925), a geometric sans"
+    ],
+    "font": {
+        "body": "DM Sans",
+        "heading": "Poppins",
+        "scale": {
+            "caption": 12,
+            "body": 15,
+            "title": 22,
+            "display": 32
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 700
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": -0.01
+        },
+        "lineHeight": {
+            "body": 1.45,
+            "title": 1.15
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 0,
+            "md": 24,
+            "lg": 0,
+            "xl": 30
+        },
+        "borderWidth": 0,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 10
+    },
+    "elevation": {
+        "card": {
+            "y": 2,
+            "blur": 6,
+            "spread": 0,
+            "opacity": 0.1,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 10,
+            "blur": 28,
+            "spread": -6,
+            "opacity": 0.2,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 200,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "filled",
+        "stroke": 2,
+        "launcher": "graphic-eq"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#F4EFE6",
+            "surface": "#FBF8F2",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#141414",
+            "textMuted": "#55514A",
+            "border": "#D8D0C1",
+            "accent": "#21409A",
+            "onAccent": "#FFFFFF",
+            "success": "#2B7A3D",
+            "warning": "#985A00",
+            "danger": "#C62A1F",
+            "userBubble": "#F2C230",
+            "userBubbleText": "#141414",
+            "agentBubble": "#ECE5D8",
+            "agentBubbleText": "#141414",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#121212",
+            "surface": "#1B1B1B",
+            "surfaceRaised": "#252525",
+            "text": "#F4EFE6",
+            "textMuted": "#B2ABA0",
+            "border": "#3A3733",
+            "accent": "#F2C230",
+            "onAccent": "#141414",
+            "success": "#5DBE6D",
+            "warning": "#E8A33A",
+            "danger": "#D0332A",
+            "userBubble": "#2F4FB8",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#252525",
+            "agentBubbleText": "#F4EFE6",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_PRECISION = {
+    "id": "precision",
+    "name": "Precision",
+    "tagline": "Dark-first and dense: near-black neutrals, hairline borders and a single indigo accent.",
+    "family": "modern",
+    "inspiredBy": [
+        "Linear, How we redesigned the Linear UI (2024)",
+        "Inter and Inter Display by Rasmus Andersson"
+    ],
+    "font": {
+        "body": "Inter",
+        "heading": "Inter",
+        "scale": {
+            "caption": 12,
+            "body": 14,
+            "title": 17,
+            "display": 24
+        },
+        "weights": {
+            "body": 400,
+            "strong": 500,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": -0.005,
+            "title": -0.014
+        },
+        "lineHeight": {
+            "body": 1.5,
+            "title": 1.3
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 4,
+            "md": 6,
+            "lg": 8,
+            "xl": 12
+        },
+        "borderWidth": 1,
+        "launcher": "rounded-square"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 12,
+        "gap": 8
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 2,
+            "spread": 0,
+            "opacity": 0.12,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 12,
+            "blur": 32,
+            "spread": -8,
+            "opacity": 0.28,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 140,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.5,
+        "launcher": "sparkles"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#F7F8F8",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#0F1011",
+            "textMuted": "#5C616A",
+            "border": "#E2E4E7",
+            "accent": "#5E6AD2",
+            "onAccent": "#FFFFFF",
+            "success": "#2E8A57",
+            "warning": "#B0560B",
+            "danger": "#CF3B41",
+            "userBubble": "#5E6AD2",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#EFF0F2",
+            "agentBubbleText": "#0F1011",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#08090A",
+            "surface": "#111214",
+            "surfaceRaised": "#191A1D",
+            "text": "#F7F8F8",
+            "textMuted": "#8E939C",
+            "border": "#26282C",
+            "accent": "#5E6AD2",
+            "onAccent": "#FFFFFF",
+            "success": "#4CB782",
+            "warning": "#F2994A",
+            "danger": "#D5434A",
+            "userBubble": "#5E6AD2",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#1A1B1E",
+            "agentBubbleText": "#F7F8F8",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_JAPANDI_CALM = {
+    "id": "japandi-calm",
+    "name": "Japandi Calm",
+    "tagline": "Warm stone, muted sage and soft serif titles, with slow, quiet motion that stays out of the way.",
+    "family": "modern",
+    "inspiredBy": [
+        "Leonard Koren, Wabi-Sabi for Artists, Designers, Poets & Philosophers (1994)",
+        "Mark Weiser & John Seely Brown, Designing Calm Technology (Xerox PARC, 1995)",
+        "Amber Case, Principles of Calm Technology"
+    ],
+    "font": {
+        "body": "Noto Sans",
+        "heading": "Noto Serif Devanagari",
+        "scale": {
+            "caption": 12,
+            "body": 16,
+            "title": 20,
+            "display": 28
+        },
+        "weights": {
+            "body": 400,
+            "strong": 500,
+            "title": 400
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.6,
+            "title": 1.35
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 6,
+            "md": 10,
+            "lg": 14,
+            "xl": 22
+        },
+        "borderWidth": 1,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 18,
+        "gap": 14
+    },
+    "elevation": {
+        "card": null,
+        "floating": {
+            "y": 8,
+            "blur": 28,
+            "spread": -8,
+            "opacity": 0.12,
+            "color": "#3B342B"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 360,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.25,
+        "launcher": "waveform"
+    },
+    "glass": null,
+    "bubbles": "minimal",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#F5F1EA",
+            "surface": "#FBF8F3",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#2B2824",
+            "textMuted": "#625C54",
+            "border": "#E2DBD0",
+            "accent": "#56654D",
+            "onAccent": "#FBF8F3",
+            "success": "#4A7646",
+            "warning": "#94661C",
+            "danger": "#A5422D",
+            "userBubble": "#E2E7DA",
+            "userBubbleText": "#2B2824",
+            "agentBubble": "#EEE9E0",
+            "agentBubbleText": "#2B2824",
+            "scrim": "#1A1814"
+        },
+        "dark": {
+            "background": "#1A1917",
+            "surface": "#22201D",
+            "surfaceRaised": "#2B2925",
+            "text": "#EEE8DF",
+            "textMuted": "#ADA59A",
+            "border": "#3A3631",
+            "accent": "#A6B596",
+            "onAccent": "#1A1917",
+            "success": "#8DB487",
+            "warning": "#D9A55B",
+            "danger": "#B9503A",
+            "userBubble": "#3A4234",
+            "userBubbleText": "#EEE8DF",
+            "agentBubble": "#2B2925",
+            "agentBubbleText": "#EEE8DF",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_GAMIFIED = {
+    "id": "gamified",
+    "name": "Gamified",
+    "tagline": "Chunky and bright, with thick outlines, pressable bottom edges and bold rounded type.",
+    "family": "expressive",
+    "inspiredBy": [
+        "Duolingo brand guidelines, colour (Feather Green #58CC02, Eel, Swan, Polar)",
+        "Yu-kai Chou, Octalysis gamification framework",
+        "Nunito, a rounded sans by Vernon Adams"
+    ],
+    "font": {
+        "body": "Nunito",
+        "heading": "Nunito",
+        "scale": {
+            "caption": 13,
+            "body": 16,
+            "title": 20,
+            "display": 30
+        },
+        "weights": {
+            "body": 500,
+            "strong": 700,
+            "title": 800
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.45,
+            "title": 1.2
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 8,
+            "md": 14,
+            "lg": 16,
+            "xl": 20
+        },
+        "borderWidth": 2,
+        "launcher": "rounded-square"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 10
+    },
+    "elevation": {
+        "card": {
+            "y": 4,
+            "blur": 0,
+            "spread": 0,
+            "opacity": 0.14,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 5,
+            "blur": 0,
+            "spread": 0,
+            "opacity": 0.18,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 280,
+        "easing": "spring",
+        "bounce": 0.4
+    },
+    "icons": {
+        "style": "filled",
+        "stroke": 2.5,
+        "launcher": "star"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#FFFFFF",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#F7F7F7",
+            "text": "#3C3C3C",
+            "textMuted": "#646464",
+            "border": "#E5E5E5",
+            "accent": "#3A8400",
+            "onAccent": "#FFFFFF",
+            "success": "#3A8400",
+            "warning": "#A86F00",
+            "danger": "#D83434",
+            "userBubble": "#58CC02",
+            "userBubbleText": "#102B00",
+            "agentBubble": "#F1F1F1",
+            "agentBubbleText": "#3C3C3C",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#131F24",
+            "surface": "#1A2A31",
+            "surfaceRaised": "#22343C",
+            "text": "#F1F7FB",
+            "textMuted": "#A5B5BD",
+            "border": "#37464F",
+            "accent": "#58CC02",
+            "onAccent": "#102B00",
+            "success": "#79D634",
+            "warning": "#FFC800",
+            "danger": "#D83434",
+            "userBubble": "#58CC02",
+            "userBubbleText": "#102B00",
+            "agentBubble": "#22343C",
+            "agentBubbleText": "#F1F7FB",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_FINTECH_CLEAR = {
+    "id": "fintech-clear",
+    "name": "Fintech Clear",
+    "tagline": "Navy ink, a steady teal accent and soft layered shadows, for screens about money.",
+    "family": "enterprise",
+    "inspiredBy": [
+        "Stripe, Designing accessible color systems (2019)",
+        "Stripe Elements Appearance API: themes and variables",
+        "IBM Plex Sans Devanagari (bilingual Latin + Devanagari)"
+    ],
+    "font": {
+        "body": "IBM Plex Sans Devanagari",
+        "heading": "IBM Plex Sans Devanagari",
+        "scale": {
+            "caption": 12,
+            "body": 15,
+            "title": 18,
+            "display": 26
+        },
+        "weights": {
+            "body": 400,
+            "strong": 500,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.55,
+            "title": 1.3
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 4,
+            "md": 6,
+            "lg": 10,
+            "xl": 14
+        },
+        "borderWidth": 1,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 12
+    },
+    "elevation": {
+        "card": {
+            "y": 2,
+            "blur": 5,
+            "spread": -1,
+            "opacity": 0.25,
+            "color": "#32325D"
+        },
+        "floating": {
+            "y": 13,
+            "blur": 27,
+            "spread": -5,
+            "opacity": 0.25,
+            "color": "#32325D"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 200,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.75,
+        "launcher": "headset"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#F6F9FC",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#0A2540",
+            "textMuted": "#425466",
+            "border": "#E3E8EE",
+            "accent": "#0B7A75",
+            "onAccent": "#FFFFFF",
+            "success": "#16794A",
+            "warning": "#A65400",
+            "danger": "#DF1B41",
+            "userBubble": "#0A2540",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#EEF2F6",
+            "agentBubbleText": "#0A2540",
+            "scrim": "#0A2540"
+        },
+        "dark": {
+            "background": "#081624",
+            "surface": "#0E2032",
+            "surfaceRaised": "#15293D",
+            "text": "#F3F6FA",
+            "textMuted": "#A3B3C4",
+            "border": "#22384F",
+            "accent": "#3CC2B8",
+            "onAccent": "#04211F",
+            "success": "#3DCB86",
+            "warning": "#F5A623",
+            "danger": "#D7304A",
+            "userBubble": "#24507A",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#15293D",
+            "agentBubbleText": "#F3F6FA",
+            "scrim": "#000000"
+        }
+    }
+};
+export const DESIGN_PRESETS = [GRAINE_CLASSIC, P_SIGNATURE, P_CHAT_NEUTRAL, P_MATERIAL_3, P_IOS_NATIVE, P_MINIMAL_MONO, P_FLUENT_2, P_CARBON, P_FINTECH_CLEAR, P_LIQUID_GLASS, P_SOFT_PLAYFUL, P_DESKTOP_BUDDY, P_SWISS_GRID, P_PRECISION, P_JAPANDI_CALM, P_NEO_BRUTALISM, P_EDITORIAL, P_LUXURY, P_RETRO_TERMINAL, P_WARM_EARTHY, P_BAUHAUS, P_GAMIFIED, P_HIGH_CONTRAST];
 export const DEFAULT_DESIGN_PRESET = "graine-classic";
+const PRESET_ALIASES = { gateway: "signature" };
 export function designPreset(id) {
-    const want = String(id ?? "").trim().toLowerCase();
+    const raw = String(id ?? "").trim().toLowerCase();
+    const want = PRESET_ALIASES[raw] ?? raw;
     return DESIGN_PRESETS.find((p) => p.id === want) ?? DESIGN_PRESETS[0];
 }
 function pick(v, allowed) {