@graineai/inapp-react-native 0.36.0 → 0.38.0

package/dist/theme.js

@@ -0,0 +1,2009 @@
+export const DESIGN_SCHEMES = ["auto", "light", "dark"];
+export const DESIGN_DENSITIES = ["compact", "comfortable", "spacious"];
+export const DESIGN_SHADOWS = ["preset", "none", "soft", "medium", "strong", "hard"];
+export const DESIGN_MOTIONS = ["preset", "none", "subtle", "lively"];
+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"];
+const HEX6 = /^#?([0-9a-f]{6})$/i;
+const HEX3 = /^#?([0-9a-f]{3})$/i;
+export function normaliseHex(value) {
+    const s = String(value ?? "").trim();
+    const six = HEX6.exec(s);
+    if (six)
+        return `#${six[1].toUpperCase()}`;
+    const three = HEX3.exec(s);
+    if (three)
+        return `#${three[1].split("").map((c) => c + c).join("").toUpperCase()}`;
+    return null;
+}
+function rgb(hex) {
+    const n = parseInt((normaliseHex(hex) ?? "#000000").slice(1), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function toHex(r, g, b) {
+    const c = (v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0");
+    return `#${c(r)}${c(g)}${c(b)}`.toUpperCase();
+}
+export function mixHex(a, b, t) {
+    const [r1, g1, b1] = rgb(a);
+    const [r2, g2, b2] = rgb(b);
+    return toHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
+}
+export function luminanceOf(hex) {
+    const ch = (c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    const [r, g, b] = rgb(hex);
+    return 0.2126 * ch(r) + 0.7152 * ch(g) + 0.0722 * ch(b);
+}
+export function contrastRatio(a, b) {
+    const la = luminanceOf(a);
+    const lb = luminanceOf(b);
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+export function readableOn(bg, candidates = ["#FFFFFF", "#101318"]) {
+    let best = candidates[0];
+    for (const c of candidates)
+        if (contrastRatio(c, bg) > contrastRatio(best, bg))
+            best = c;
+    return best;
+}
+export function ensureContrast(fg, bg, min = 4.5) {
+    if (contrastRatio(fg, bg) >= min)
+        return fg;
+    const toward = luminanceOf(bg) > 0.5 ? "#000000" : "#FFFFFF";
+    for (let t = 0.1; t <= 1.0001; t += 0.1) {
+        const c = mixHex(fg, toward, t);
+        if (contrastRatio(c, bg) >= min)
+            return c;
+    }
+    return toward;
+}
+export const LAUNCHER_ICONS = [
+    { id: "waveform", label: "Waveform", stroke: true, path: "M2 13a2 2 0 0 0 2 -2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2 -2" },
+    { id: "audio-lines", label: "Audio lines", stroke: true, path: "M2 10v3M6 6v11M10 3v18M14 8v7M18 5v13M22 10v3" },
+    { id: "sparkles", label: "Sparkles", stroke: true, path: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0 -1.594 1.594l-1.051 5.558a1 1 0 0 1 -1.966 0l-1.051 -5.558a2 2 0 0 0 -1.594 -1.594l-5.558 -1.051a1 1 0 0 1 0 -1.966l5.558 -1.051a2 2 0 0 0 1.594 -1.594zM20 2v4M22 4h-4M2 20a2 2 0 1 0 4 0a2 2 0 1 0 -4 0z" },
+    { id: "microphone", label: "Microphone", stroke: true, path: "M12 19v3M19 10v2a7 7 0 0 1 -14 0v-2M12 2h0a3 3 0 0 1 3 3v7a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3v-7a3 3 0 0 1 3 -3z" },
+    { id: "message-circle", label: "Chat bubble", stroke: true, path: "M2.992 16.342a2 2 0 0 1 0.094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413 -0.998a2 2 0 0 1 1.099 0.092a10 10 0 1 0 -4.777 -4.719" },
+    { id: "headset", label: "Headset", stroke: true, path: "M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2H5a2 2 0 0 1 -2 -2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3a2 2 0 0 1 2 -2h3ZM21 16v2a4 4 0 0 1 -4 4h-5" },
+    { id: "bot", label: "Bot", stroke: true, path: "M12 8V4H8M6 8h12a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2zM2 14h2M20 14h2M15 13v2M9 13v2" },
+    { id: "phone", label: "Phone", stroke: true, path: "M13.832 16.568a1 1 0 0 0 1.213 -0.303l0.355 -0.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2A18 18 0 0 1 2 4a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v3a2 2 0 0 1 -0.8 1.6l-0.468 0.351a1 1 0 0 0 -0.292 1.233a14 14 0 0 0 6.392 6.384" },
+    { id: "zap", label: "Zap", stroke: true, path: "M15.914 4a1.5 1.5 0 0 0 -2.474 -1.561l-9 9A1.5 1.5 0 0 0 5.5 14h4.002a0.5 0.5 0 0 1 0.471 0.666L8.086 20a1.5 1.5 0 0 0 2.475 1.56l9 -9A1.5 1.5 0 0 0 18.5 10h-3.997a0.5 0.5 0 0 1 -0.472 -0.667z" },
+    { 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: "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" },
+];
+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" },
+    micOff: { 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.5M4 4l16 16" },
+    end: { body: "M4.2 14.6c4.6-4.1 11-4.1 15.6 0 .6.5.6 1.4.1 2l-1.3 1.4c-.4.5-1.1.6-1.7.3l-2.2-1.2c-.5-.3-.8-.8-.7-1.4l.2-1.3a11 11 0 0 0-4.4 0l.2 1.3c.1.6-.2 1.1-.7 1.4l-2.2 1.2c-.6.3-1.3.2-1.7-.3L4.1 16.6c-.5-.6-.5-1.5.1-2z" },
+    send: { body: "M4 12 20 4l-4 16-4.5-6.5L4 12z", lines: "M11.5 13.5 20 4" },
+    chat: { body: "M20 12a8 8 0 0 1-11.6 7.1L4 20l1-4.2A8 8 0 1 1 20 12z" },
+    call: { lines: "M13.832 16.568a1 1 0 0 0 1.213 -0.303l0.355 -0.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2A18 18 0 0 1 2 4a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v3a2 2 0 0 1 -0.8 1.6l-0.468 0.351a1 1 0 0 0 -0.292 1.233a14 14 0 0 0 6.392 6.384" },
+    chevron: { lines: "M6 15l6-6 6 6" },
+    close: { lines: "M6 6l12 12M18 6 6 18" },
+};
+export const DESIGN_FONTS = [
+    { family: "system", category: "sans", scripts: ["latin", "devanagari", "bengali", "tamil", "telugu", "kannada", "malayalam", "gujarati", "gurmukhi", "oriya"] },
+    { family: "Inter", category: "sans", scripts: ["latin", "latin-ext", "cyrillic", "cyrillic-ext", "greek", "greek-ext", "vietnamese"] },
+    { family: "Roboto", category: "sans", scripts: ["latin", "latin-ext", "cyrillic", "cyrillic-ext", "greek", "greek-ext", "vietnamese"] },
+    { family: "Geist", category: "sans", scripts: ["latin", "latin-ext", "cyrillic", "cyrillic-ext", "vietnamese"] },
+    { family: "IBM Plex Sans", category: "sans", scripts: ["latin", "latin-ext", "cyrillic", "cyrillic-ext", "greek", "vietnamese"] },
+    { family: "IBM Plex Sans Devanagari", category: "sans", scripts: ["devanagari", "latin", "latin-ext", "cyrillic-ext"] },
+    { family: "DM Sans", category: "sans", scripts: ["latin", "latin-ext"] },
+    { family: "Noto Sans", category: "sans", scripts: ["latin", "latin-ext", "devanagari", "cyrillic", "cyrillic-ext", "greek", "greek-ext", "vietnamese"] },
+    { family: "Noto Sans Devanagari", category: "sans", scripts: ["devanagari", "latin", "latin-ext"] },
+    { family: "Noto Sans Tamil", category: "sans", scripts: ["tamil", "latin", "latin-ext"] },
+    { family: "Mukta", category: "sans", scripts: ["devanagari", "latin", "latin-ext"] },
+    { family: "Hind", category: "sans", scripts: ["devanagari", "latin", "latin-ext"] },
+    { family: "Anek Devanagari", category: "sans", scripts: ["devanagari", "latin", "latin-ext"] },
+    { family: "Poppins", category: "sans", scripts: ["devanagari", "latin", "latin-ext"] },
+    { family: "Baloo 2", category: "display", scripts: ["devanagari", "latin", "latin-ext", "vietnamese"] },
+    { family: "Nunito", category: "sans", scripts: ["latin", "latin-ext", "cyrillic", "cyrillic-ext", "vietnamese"] },
+    { family: "Atkinson Hyperlegible Next", category: "sans", scripts: ["latin", "latin-ext"] },
+    { family: "Source Serif 4", category: "serif", scripts: ["latin", "latin-ext", "cyrillic", "cyrillic-ext", "greek", "vietnamese"] },
+    { family: "Newsreader", category: "serif", scripts: ["latin", "latin-ext", "vietnamese"] },
+    { family: "Fraunces", category: "serif", scripts: ["latin", "latin-ext", "vietnamese"] },
+    { family: "Playfair Display", category: "serif", scripts: ["latin", "latin-ext", "cyrillic", "vietnamese"] },
+    { family: "Tiro Devanagari Hindi", category: "serif", scripts: ["devanagari", "latin", "latin-ext"] },
+    { family: "Noto Serif Devanagari", category: "serif", scripts: ["devanagari", "latin", "latin-ext"] },
+    { family: "Martel", category: "serif", scripts: ["devanagari", "latin", "latin-ext"] },
+    { family: "JetBrains Mono", category: "mono", scripts: ["latin", "latin-ext", "cyrillic", "cyrillic-ext", "greek", "vietnamese"] },
+];
+const GRAINE_CLASSIC = {
+    id: "graine-classic",
+    name: "Graine Classic",
+    tagline: "The look your widget has today",
+    family: "graine",
+    inspiredBy: ["Graine"],
+    font: {
+        body: "system", heading: "system",
+        scale: { caption: 12, body: 15, title: 17, display: 22 },
+        weights: { body: 400, strong: 600, title: 600 },
+        letterSpacing: { body: 0, title: -0.01 },
+        lineHeight: { body: 1.45, title: 1.25 },
+    },
+    shape: { radius: { sm: 8, md: 12, lg: 18, xl: 24 }, borderWidth: 1, launcher: "circle" },
+    spacing: { unit: 4, cardPadding: 14, gap: 10 },
+    elevation: {
+        card: { y: 2, blur: 8, spread: 0, opacity: 0.08, color: "#000000" },
+        floating: { y: 8, blur: 24, spread: 0, opacity: 0.16, color: "#000000" },
+        hardOffset: null,
+    },
+    motion: { durationMs: 200, easing: "standard", bounce: 0 },
+    icons: { style: "outline", stroke: 2, launcher: "waveform" },
+    glass: null,
+    bubbles: "filled",
+    colors: {
+        light: {
+            background: "#F7F7F5", surface: "#FFFFFF", surfaceRaised: "#FFFFFF", text: "#101318", textMuted: "#5F6672",
+            border: "#E5E4E0", accent: "#318CE7", onAccent: "#FFFFFF", success: "#16A34A", warning: "#B45309", danger: "#DC2626",
+            userBubble: "#318CE7", userBubbleText: "#FFFFFF", agentBubble: "#F1F1EF", agentBubbleText: "#101318", scrim: "#000000",
+        },
+        dark: {
+            background: "#0E0F11", surface: "#17181B", surfaceRaised: "#1F2024", text: "#F5F5F4", textMuted: "#A0A5AE",
+            border: "#2C2E33", accent: "#318CE7", onAccent: "#FFFFFF", success: "#22C55E", warning: "#F59E0B", danger: "#F87171",
+            userBubble: "#318CE7", userBubbleText: "#FFFFFF", agentBubble: "#23252A", agentBubbleText: "#F5F5F4", scrim: "#000000",
+        },
+    },
+};
+const P_CHAT_NEUTRAL = {
+    "id": "chat-neutral",
+    "name": "Chat Neutral",
+    "tagline": "Quiet greys and system type; your brand shows up only in the accent.",
+    "family": "native",
+    "inspiredBy": [
+        "OpenAI Apps SDK UI (openai/apps-sdk-ui)",
+        "OpenAI Apps SDK design guidelines"
+    ],
+    "font": {
+        "body": "system",
+        "heading": "system",
+        "scale": {
+            "caption": 12,
+            "body": 16,
+            "title": 18,
+            "display": 24
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.5,
+            "title": 1.44
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 6,
+            "md": 12,
+            "lg": 16,
+            "xl": 24
+        },
+        "borderWidth": 1,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 12
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 2,
+            "spread": -1,
+            "opacity": 0.08,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 8,
+            "blur": 16,
+            "spread": -4,
+            "opacity": 0.12,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 150,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 2,
+        "launcher": "sparkles"
+    },
+    "glass": null,
+    "bubbles": "minimal",
+    "colors": {
+        "light": {
+            "background": "#FFFFFF",
+            "surface": "#F9F9F9",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#0D0D0D",
+            "textMuted": "#5D5D5D",
+            "border": "#E7E7E7",
+            "accent": "#181818",
+            "onAccent": "#FFFFFF",
+            "success": "#00692A",
+            "warning": "#923B0F",
+            "danger": "#911E1B",
+            "userBubble": "#EDEDED",
+            "userBubbleText": "#0D0D0D",
+            "agentBubble": "#FFFFFF",
+            "agentBubbleText": "#0D0D0D",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#212121",
+            "surface": "#181818",
+            "surfaceRaised": "#303030",
+            "text": "#FFFFFF",
+            "textMuted": "#AFAFAF",
+            "border": "#3C3C3C",
+            "accent": "#F3F3F3",
+            "onAccent": "#0D0D0D",
+            "success": "#04B84C",
+            "warning": "#E25507",
+            "danger": "#E02E2A",
+            "userBubble": "#303030",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#212121",
+            "agentBubbleText": "#FFFFFF",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_MATERIAL_3 = {
+    "id": "material-3",
+    "name": "Material You",
+    "tagline": "Google's Material 3: tonal surfaces, soft corners, springy motion.",
+    "family": "native",
+    "inspiredBy": [
+        "Material Design 3 (material-components/material-web tokens)"
+    ],
+    "font": {
+        "body": "Roboto",
+        "heading": "Roboto",
+        "scale": {
+            "caption": 12,
+            "body": 16,
+            "title": 22,
+            "display": 28
+        },
+        "weights": {
+            "body": 400,
+            "strong": 500,
+            "title": 400
+        },
+        "letterSpacing": {
+            "body": 0.0313,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.5,
+            "title": 1.27
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 8,
+            "md": 12,
+            "lg": 16,
+            "xl": 28
+        },
+        "borderWidth": 1,
+        "launcher": "rounded-square"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 8
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 3,
+            "spread": 1,
+            "opacity": 0.15,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 4,
+            "blur": 8,
+            "spread": 3,
+            "opacity": 0.15,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 240,
+        "easing": "spring",
+        "bounce": 0.1
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 2,
+        "launcher": "graphic-eq"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#FEF7FF",
+            "surface": "#F7F2FA",
+            "surfaceRaised": "#ECE6F0",
+            "text": "#1D1B20",
+            "textMuted": "#49454F",
+            "border": "#CAC4D0",
+            "accent": "#6750A4",
+            "onAccent": "#FFFFFF",
+            "success": "#287630",
+            "warning": "#8A5700",
+            "danger": "#B3261E",
+            "userBubble": "#EADDFF",
+            "userBubbleText": "#4F378B",
+            "agentBubble": "#E6E0E9",
+            "agentBubbleText": "#1D1B20",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#141218",
+            "surface": "#1D1B20",
+            "surfaceRaised": "#2B2930",
+            "text": "#E6E0E9",
+            "textMuted": "#CAC4D0",
+            "border": "#49454F",
+            "accent": "#D0BCFF",
+            "onAccent": "#381E72",
+            "success": "#9BDC9C",
+            "warning": "#F3BE74",
+            "danger": "#F2B8B5",
+            "userBubble": "#4F378B",
+            "userBubbleText": "#EADDFF",
+            "agentBubble": "#36343B",
+            "agentBubbleText": "#E6E0E9",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_IOS_NATIVE = {
+    "id": "ios-native",
+    "name": "iOS Native",
+    "tagline": "Feels like it shipped with the iPhone: SF type, system blue, grey bubbles.",
+    "family": "native",
+    "inspiredBy": [
+        "Apple Human Interface Guidelines (iOS system colors, Dynamic Type, SF Pro)"
+    ],
+    "font": {
+        "body": "system",
+        "heading": "system",
+        "scale": {
+            "caption": 12,
+            "body": 17,
+            "title": 20,
+            "display": 28
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": -0.026,
+            "title": -0.023
+        },
+        "lineHeight": {
+            "body": 1.29,
+            "title": 1.25
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 8,
+            "md": 12,
+            "lg": 18,
+            "xl": 26
+        },
+        "borderWidth": 0.5,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 8
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 3,
+            "spread": 0,
+            "opacity": 0.06,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 8,
+            "blur": 24,
+            "spread": 0,
+            "opacity": 0.12,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 500,
+        "easing": "spring",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.5,
+        "launcher": "waveform"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#FFFFFF",
+            "surface": "#F2F2F7",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#000000",
+            "textMuted": "#6C6C70",
+            "border": "#C6C6C8",
+            "accent": "#1E6EF4",
+            "onAccent": "#FFFFFF",
+            "success": "#008932",
+            "warning": "#C55300",
+            "danger": "#FF383C",
+            "userBubble": "#1E6EF4",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#E5E5EA",
+            "agentBubbleText": "#000000",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#000000",
+            "surface": "#1C1C1E",
+            "surfaceRaised": "#2C2C2E",
+            "text": "#FFFFFF",
+            "textMuted": "#8D8D93",
+            "border": "#323235",
+            "accent": "#1E6EF4",
+            "onAccent": "#FFFFFF",
+            "success": "#30D158",
+            "warning": "#FF9230",
+            "danger": "#FF4245",
+            "userBubble": "#1E6EF4",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#2C2C2E",
+            "agentBubbleText": "#FFFFFF",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_MINIMAL_MONO = {
+    "id": "minimal-mono",
+    "name": "Minimal Mono",
+    "tagline": "Black, white and one hairline border. Lets the words do the work.",
+    "family": "modern",
+    "inspiredBy": [
+        "shadcn/ui default theme (shadcn-ui/ui)",
+        "Vercel Geist typeface (vercel/geist-font)",
+        "Tailwind CSS palette"
+    ],
+    "font": {
+        "body": "Geist",
+        "heading": "Geist",
+        "scale": {
+            "caption": 12,
+            "body": 14,
+            "title": 16,
+            "display": 24
+        },
+        "weights": {
+            "body": 400,
+            "strong": 500,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": -0.025
+        },
+        "lineHeight": {
+            "body": 1.43,
+            "title": 1.5
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 6,
+            "md": 8,
+            "lg": 10,
+            "xl": 14
+        },
+        "borderWidth": 1,
+        "launcher": "rounded-square"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 24,
+        "gap": 24
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 3,
+            "spread": 0,
+            "opacity": 0.1,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 10,
+            "blur": 15,
+            "spread": -3,
+            "opacity": 0.1,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 150,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 2,
+        "launcher": "audio-lines"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#FFFFFF",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#0A0A0A",
+            "textMuted": "#737373",
+            "border": "#E5E5E5",
+            "accent": "#171717",
+            "onAccent": "#FAFAFA",
+            "success": "#00813A",
+            "warning": "#B55200",
+            "danger": "#E40016",
+            "userBubble": "#171717",
+            "userBubbleText": "#FAFAFA",
+            "agentBubble": "#F5F5F5",
+            "agentBubbleText": "#171717",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#0A0A0A",
+            "surface": "#171717",
+            "surfaceRaised": "#171717",
+            "text": "#FAFAFA",
+            "textMuted": "#A1A1A1",
+            "border": "#232323",
+            "accent": "#E5E5E5",
+            "onAccent": "#171717",
+            "success": "#05DF72",
+            "warning": "#FABC00",
+            "danger": "#FF6568",
+            "userBubble": "#E5E5E5",
+            "userBubbleText": "#171717",
+            "agentBubble": "#262626",
+            "agentBubbleText": "#FAFAFA",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_FLUENT_2 = {
+    "id": "fluent-2",
+    "name": "Fluent",
+    "tagline": "Microsoft's calm, businesslike Fluent 2: familiar from Teams and Office.",
+    "family": "enterprise",
+    "inspiredBy": [
+        "Microsoft Fluent 2 (microsoft/fluentui @fluentui/tokens)"
+    ],
+    "font": {
+        "body": "system",
+        "heading": "system",
+        "scale": {
+            "caption": 12,
+            "body": 14,
+            "title": 20,
+            "display": 28
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.43,
+            "title": 1.4
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 2,
+            "md": 4,
+            "lg": 6,
+            "xl": 8
+        },
+        "borderWidth": 1,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 12,
+        "gap": 12
+    },
+    "elevation": {
+        "card": {
+            "y": 2,
+            "blur": 4,
+            "spread": 0,
+            "opacity": 0.14,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 8,
+            "blur": 16,
+            "spread": 0,
+            "opacity": 0.14,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 200,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.5,
+        "launcher": "message-circle"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#FAFAFA",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#242424",
+            "textMuted": "#616161",
+            "border": "#E0E0E0",
+            "accent": "#0F6CBD",
+            "onAccent": "#FFFFFF",
+            "success": "#0E700E",
+            "warning": "#BC4B09",
+            "danger": "#B10E1C",
+            "userBubble": "#EBF3FC",
+            "userBubbleText": "#242424",
+            "agentBubble": "#FFFFFF",
+            "agentBubbleText": "#242424",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#1F1F1F",
+            "surface": "#292929",
+            "surfaceRaised": "#292929",
+            "text": "#FFFFFF",
+            "textMuted": "#ADADAD",
+            "border": "#525252",
+            "accent": "#115EA3",
+            "onAccent": "#FFFFFF",
+            "success": "#54B054",
+            "warning": "#FAA06B",
+            "danger": "#DC626D",
+            "userBubble": "#082338",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#292929",
+            "agentBubbleText": "#FFFFFF",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_CARBON = {
+    "id": "carbon",
+    "name": "Enterprise Grid",
+    "tagline": "IBM Carbon: square, precise and serious, built for trust.",
+    "family": "enterprise",
+    "inspiredBy": [
+        "IBM Carbon Design System v11 (carbon-design-system/carbon)"
+    ],
+    "font": {
+        "body": "IBM Plex Sans",
+        "heading": "IBM Plex Sans",
+        "scale": {
+            "caption": 12,
+            "body": 14,
+            "title": 20,
+            "display": 28
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 400
+        },
+        "letterSpacing": {
+            "body": 0.0114,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.43,
+            "title": 1.4
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 0,
+            "md": 2,
+            "lg": 4,
+            "xl": 8
+        },
+        "borderWidth": 1,
+        "launcher": "square"
+    },
+    "spacing": {
+        "unit": 8,
+        "cardPadding": 16,
+        "gap": 8
+    },
+    "elevation": {
+        "card": {
+            "y": 0,
+            "blur": 0,
+            "spread": 0,
+            "opacity": 0,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 2,
+            "blur": 6,
+            "spread": 0,
+            "opacity": 0.3,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 150,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "sharp",
+        "stroke": 1.5,
+        "launcher": "headset"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#FFFFFF",
+            "surface": "#F4F4F4",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#161616",
+            "textMuted": "#525252",
+            "border": "#C6C6C6",
+            "accent": "#0F62FE",
+            "onAccent": "#FFFFFF",
+            "success": "#24A148",
+            "warning": "#AB8800",
+            "danger": "#DA1E28",
+            "userBubble": "#E0E0E0",
+            "userBubbleText": "#161616",
+            "agentBubble": "#FFFFFF",
+            "agentBubbleText": "#161616",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#161616",
+            "surface": "#262626",
+            "surfaceRaised": "#393939",
+            "text": "#F4F4F4",
+            "textMuted": "#C6C6C6",
+            "border": "#525252",
+            "accent": "#0F62FE",
+            "onAccent": "#FFFFFF",
+            "success": "#42BE65",
+            "warning": "#F1C21B",
+            "danger": "#FA4D56",
+            "userBubble": "#393939",
+            "userBubbleText": "#F4F4F4",
+            "agentBubble": "#262626",
+            "agentBubbleText": "#F4F4F4",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_LIQUID_GLASS = {
+    "id": "liquid-glass",
+    "name": "Liquid Glass",
+    "tagline": "Frosted, floating panels that let the page glow through.",
+    "family": "modern",
+    "inspiredBy": [
+        "Apple Liquid Glass & standard materials (HIG Materials)",
+        "css.glass glassmorphism generator"
+    ],
+    "font": {
+        "body": "system",
+        "heading": "system",
+        "scale": {
+            "caption": 12,
+            "body": 17,
+            "title": 20,
+            "display": 34
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": -0.026,
+            "title": -0.023
+        },
+        "lineHeight": {
+            "body": 1.29,
+            "title": 1.25
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 12,
+            "md": 20,
+            "lg": 28,
+            "xl": 36
+        },
+        "borderWidth": 1,
+        "launcher": "pill"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 12
+    },
+    "elevation": {
+        "card": {
+            "y": 2,
+            "blur": 12,
+            "spread": 0,
+            "opacity": 0.08,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 4,
+            "blur": 30,
+            "spread": 0,
+            "opacity": 0.1,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 500,
+        "easing": "spring",
+        "bounce": 0.15
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.5,
+        "launcher": "sparkle-filled"
+    },
+    "glass": {
+        "blur": 20,
+        "surfaceOpacity": 0.72
+    },
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#F2F2F7",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#000000",
+            "textMuted": "#3C3C43",
+            "border": "#C6C6C8",
+            "accent": "#6155F5",
+            "onAccent": "#FFFFFF",
+            "success": "#008932",
+            "warning": "#C55300",
+            "danger": "#FF383C",
+            "userBubble": "#6155F5",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#FFFFFF",
+            "agentBubbleText": "#000000",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#000000",
+            "surface": "#1C1C1E",
+            "surfaceRaised": "#2C2C2E",
+            "text": "#FFFFFF",
+            "textMuted": "#EBEBF5",
+            "border": "#38383A",
+            "accent": "#6155F5",
+            "onAccent": "#FFFFFF",
+            "success": "#30D158",
+            "warning": "#FF9230",
+            "danger": "#FF4245",
+            "userBubble": "#6155F5",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#2C2C2E",
+            "agentBubbleText": "#FFFFFF",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_SOFT_PLAYFUL = {
+    "id": "soft-playful",
+    "name": "Soft & Playful",
+    "tagline": "Rounded, pastel and friendly, like a cupcake shop that answers the phone.",
+    "family": "modern",
+    "inspiredBy": [
+        "daisyUI \"cupcake\" theme (saadeghi/daisyui)"
+    ],
+    "font": {
+        "body": "Nunito",
+        "heading": "Baloo 2",
+        "scale": {
+            "caption": 12,
+            "body": 16,
+            "title": 20,
+            "display": 28
+        },
+        "weights": {
+            "body": 400,
+            "strong": 700,
+            "title": 700
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.5,
+            "title": 1.25
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 16,
+            "md": 32,
+            "lg": 16,
+            "xl": 24
+        },
+        "borderWidth": 2,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 24,
+        "gap": 8
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 3,
+            "spread": 0,
+            "opacity": 0.1,
+            "color": "#291334"
+        },
+        "floating": {
+            "y": 10,
+            "blur": 15,
+            "spread": -3,
+            "opacity": 0.12,
+            "color": "#291334"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 400,
+        "easing": "spring",
+        "bounce": 0.3
+    },
+    "icons": {
+        "style": "filled",
+        "stroke": 1.5,
+        "launcher": "chat-dots-filled"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#FAF7F5",
+            "surface": "#EFEAE6",
+            "surfaceRaised": "#FAF7F5",
+            "text": "#291334",
+            "textMuted": "#64536A",
+            "border": "#E7E2DF",
+            "accent": "#44EBD3",
+            "onAccent": "#005D58",
+            "success": "#009768",
+            "warning": "#A87F00",
+            "danger": "#FE1C55",
+            "userBubble": "#44EBD3",
+            "userBubbleText": "#005D58",
+            "agentBubble": "#E7E2DF",
+            "agentBubbleText": "#291334",
+            "scrim": "#262629"
+        },
+        "dark": {
+            "background": "#262629",
+            "surface": "#303033",
+            "surfaceRaised": "#3A3A3E",
+            "text": "#E4E4E7",
+            "textMuted": "#ABABAE",
+            "border": "#47474B",
+            "accent": "#44EBD3",
+            "onAccent": "#005D58",
+            "success": "#00B77F",
+            "warning": "#E8B100",
+            "danger": "#FE1C55",
+            "userBubble": "#44EBD3",
+            "userBubbleText": "#005D58",
+            "agentBubble": "#3A3A3E",
+            "agentBubbleText": "#E4E4E7",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_NEO_BRUTALISM = {
+    "id": "neo-brutalism",
+    "name": "Neo-Brutalist",
+    "tagline": "Thick black outlines, hard shadows, loud colour. Impossible to ignore.",
+    "family": "expressive",
+    "inspiredBy": [
+        "neobrutalism.dev (ekmas/neobrutalism-components)"
+    ],
+    "font": {
+        "body": "DM Sans",
+        "heading": "DM Sans",
+        "scale": {
+            "caption": 12,
+            "body": 16,
+            "title": 20,
+            "display": 32
+        },
+        "weights": {
+            "body": 500,
+            "strong": 700,
+            "title": 700
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.5,
+            "title": 1.2
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 5,
+            "md": 5,
+            "lg": 5,
+            "xl": 5
+        },
+        "borderWidth": 2,
+        "launcher": "rounded-square"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 24,
+        "gap": 24
+    },
+    "elevation": {
+        "card": {
+            "y": 0,
+            "blur": 0,
+            "spread": 0,
+            "opacity": 0,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 0,
+            "blur": 0,
+            "spread": 0,
+            "opacity": 0,
+            "color": "#000000"
+        },
+        "hardOffset": {
+            "x": 4,
+            "y": 4
+        }
+    },
+    "motion": {
+        "durationMs": 150,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 2,
+        "launcher": "zap"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#DCEBFE",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#000000",
+            "textMuted": "#383838",
+            "border": "#000000",
+            "accent": "#5294FF",
+            "onAccent": "#000000",
+            "success": "#009951",
+            "warning": "#A08100",
+            "danger": "#F24045",
+            "userBubble": "#5294FF",
+            "userBubbleText": "#000000",
+            "agentBubble": "#FFFFFF",
+            "agentBubbleText": "#000000",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#20294B",
+            "surface": "#1F1F1F",
+            "surfaceRaised": "#1F1F1F",
+            "text": "#E6E6E6",
+            "textMuted": "#BABCC4",
+            "border": "#000000",
+            "accent": "#5294FF",
+            "onAccent": "#000000",
+            "success": "#05E17A",
+            "warning": "#FACC00",
+            "danger": "#FF4D50",
+            "userBubble": "#5294FF",
+            "userBubbleText": "#000000",
+            "agentBubble": "#1F1F1F",
+            "agentBubbleText": "#E6E6E6",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_EDITORIAL = {
+    "id": "editorial",
+    "name": "Editorial",
+    "tagline": "Reads like a well-set magazine: serif type, warm paper, ink-red accents.",
+    "family": "expressive",
+    "inspiredBy": [
+        "Radix Themes (radix-ui/themes)",
+        "Radix Colors sand + ruby (radix-ui/colors)"
+    ],
+    "font": {
+        "body": "Source Serif 4",
+        "heading": "Newsreader",
+        "scale": {
+            "caption": 12,
+            "body": 16,
+            "title": 24,
+            "display": 35
+        },
+        "weights": {
+            "body": 400,
+            "strong": 700,
+            "title": 700
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": -0.00625
+        },
+        "lineHeight": {
+            "body": 1.5,
+            "title": 1.25
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 4,
+            "md": 6,
+            "lg": 8,
+            "xl": 12
+        },
+        "borderWidth": 1,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 24,
+        "gap": 16
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 3,
+            "spread": 0,
+            "opacity": 0.05,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 12,
+            "blur": 60,
+            "spread": 0,
+            "opacity": 0.15,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 120,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.5,
+        "launcher": "message-circle"
+    },
+    "glass": null,
+    "bubbles": "minimal",
+    "colors": {
+        "light": {
+            "background": "#FDFDFC",
+            "surface": "#F9F9F8",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#21201C",
+            "textMuted": "#63635E",
+            "border": "#DAD9D6",
+            "accent": "#CA244D",
+            "onAccent": "#FFFFFF",
+            "success": "#2A7E3B",
+            "warning": "#AB6400",
+            "danger": "#CE2C31",
+            "userBubble": "#FEEAED",
+            "userBubbleText": "#64172B",
+            "agentBubble": "#F1F0EF",
+            "agentBubbleText": "#21201C",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#111110",
+            "surface": "#191918",
+            "surfaceRaised": "#222221",
+            "text": "#EEEEEC",
+            "textMuted": "#B5B3AD",
+            "border": "#3B3A37",
+            "accent": "#CA244D",
+            "onAccent": "#FFFFFF",
+            "success": "#71D083",
+            "warning": "#FFCA16",
+            "danger": "#FF9592",
+            "userBubble": "#3A141E",
+            "userBubbleText": "#FED2E1",
+            "agentBubble": "#222221",
+            "agentBubbleText": "#EEEEEC",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_LUXURY = {
+    "id": "luxury",
+    "name": "Black & Gold",
+    "tagline": "Gold on near-black with high-contrast serif titles. Quietly expensive.",
+    "family": "expressive",
+    "inspiredBy": [
+        "daisyUI \"luxury\" theme (saadeghi/daisyui)"
+    ],
+    "font": {
+        "body": "Poppins",
+        "heading": "Playfair Display",
+        "scale": {
+            "caption": 12,
+            "body": 15,
+            "title": 22,
+            "display": 32
+        },
+        "weights": {
+            "body": 400,
+            "strong": 500,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": 0.01,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.6,
+            "title": 1.2
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 16,
+            "md": 8,
+            "lg": 16,
+            "xl": 24
+        },
+        "borderWidth": 1,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 24,
+        "gap": 8
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 3,
+            "spread": 0,
+            "opacity": 0.3,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 12,
+            "blur": 32,
+            "spread": -4,
+            "opacity": 0.45,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 300,
+        "easing": "emphasized",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.25,
+        "launcher": "star"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#FAF7EE",
+            "surface": "#F3EEE0",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#09090B",
+            "textMuted": "#565554",
+            "border": "#E2CEB1",
+            "accent": "#DCA54D",
+            "onAccent": "#09090B",
+            "success": "#5A9700",
+            "warning": "#968900",
+            "danger": "#E6585A",
+            "userBubble": "#DCA54D",
+            "userBubbleText": "#09090B",
+            "agentBubble": "#F3EEE0",
+            "agentBubbleText": "#09090B",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#09090B",
+            "surface": "#171618",
+            "surfaceRaised": "#1E1D1F",
+            "text": "#FFE7A4",
+            "textMuted": "#A2936A",
+            "border": "#331800",
+            "accent": "#DCA54D",
+            "onAccent": "#09090B",
+            "success": "#87D03A",
+            "warning": "#E2D563",
+            "danger": "#FF6F6F",
+            "userBubble": "#DCA54D",
+            "userBubbleText": "#09090B",
+            "agentBubble": "#1E1D1F",
+            "agentBubbleText": "#DCA54D",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_RETRO_TERMINAL = {
+    "id": "retro-terminal",
+    "name": "Retro Terminal",
+    "tagline": "Green phosphor on black, monospace everything. For builders and tinkerers.",
+    "family": "expressive",
+    "inspiredBy": [
+        "terminal.css (Gioni06/terminal.css)",
+        "cool-retro-term profiles (Swordfish90/cool-retro-term)"
+    ],
+    "font": {
+        "body": "JetBrains Mono",
+        "heading": "JetBrains Mono",
+        "scale": {
+            "caption": 12,
+            "body": 15,
+            "title": 15,
+            "display": 20
+        },
+        "weights": {
+            "body": 400,
+            "strong": 700,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.4,
+            "title": 1.4
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 0,
+            "md": 0,
+            "lg": 0,
+            "xl": 0
+        },
+        "borderWidth": 1,
+        "launcher": "square"
+    },
+    "spacing": {
+        "unit": 10,
+        "cardPadding": 10,
+        "gap": 10
+    },
+    "elevation": {
+        "card": {
+            "y": 0,
+            "blur": 0,
+            "spread": 0,
+            "opacity": 0,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 0,
+            "blur": 0,
+            "spread": 0,
+            "opacity": 0,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 0,
+        "easing": "none",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "sharp",
+        "stroke": 2,
+        "launcher": "bot"
+    },
+    "glass": null,
+    "bubbles": "outline",
+    "colors": {
+        "light": {
+            "background": "#F2F2EC",
+            "surface": "#E7E7E1",
+            "surfaceRaised": "#F2F2EC",
+            "text": "#101010",
+            "textMuted": "#65686B",
+            "border": "#727578",
+            "accent": "#007E3D",
+            "onAccent": "#F2F2EC",
+            "success": "#00964A",
+            "warning": "#CB6600",
+            "danger": "#D20962",
+            "userBubble": "#007E3D",
+            "userBubbleText": "#F2F2EC",
+            "agentBubble": "#F2F2EC",
+            "agentBubbleText": "#101010",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#000000",
+            "surface": "#010C06",
+            "surfaceRaised": "#01140A",
+            "text": "#0CCC68",
+            "textMuted": "#088B47",
+            "border": "#055C2F",
+            "accent": "#0CCC68",
+            "onAccent": "#000000",
+            "success": "#0CCC68",
+            "warning": "#FF8100",
+            "danger": "#FF3C74",
+            "userBubble": "#0CCC68",
+            "userBubbleText": "#000000",
+            "agentBubble": "#000000",
+            "agentBubbleText": "#0CCC68",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_WARM_EARTHY = {
+    "id": "warm-earthy",
+    "name": "Warm & Earthy",
+    "tagline": "Caramel, cream and coffee tones with soft serif titles. Human and grounded.",
+    "family": "expressive",
+    "inspiredBy": [
+        "daisyUI \"caramellatte\" (light) and \"coffee\" (dark) themes (saadeghi/daisyui)"
+    ],
+    "font": {
+        "body": "Mukta",
+        "heading": "Fraunces",
+        "scale": {
+            "caption": 12,
+            "body": 16,
+            "title": 22,
+            "display": 30
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": -0.01
+        },
+        "lineHeight": {
+            "body": 1.5,
+            "title": 1.2
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 32,
+            "md": 8,
+            "lg": 16,
+            "xl": 24
+        },
+        "borderWidth": 2,
+        "launcher": "squircle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 24,
+        "gap": 8
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 3,
+            "spread": 0,
+            "opacity": 0.12,
+            "color": "#7C2808"
+        },
+        "floating": {
+            "y": 12,
+            "blur": 32,
+            "spread": -8,
+            "opacity": 0.2,
+            "color": "#7C2808"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 200,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "duotone",
+        "stroke": 1.5,
+        "launcher": "orbit"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#FFF7ED",
+            "surface": "#FEECD3",
+            "surfaceRaised": "#FFF7ED",
+            "text": "#7C2808",
+            "textMuted": "#99563A",
+            "border": "#FFD6A7",
+            "accent": "#8C3F27",
+            "onAccent": "#FFD6A7",
+            "success": "#005F45",
+            "warning": "#AD8100",
+            "danger": "#ED5157",
+            "userBubble": "#8C3F27",
+            "userBubbleText": "#FFD6A7",
+            "agentBubble": "#FFD6A7",
+            "agentBubbleText": "#7C2808",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#261B25",
+            "surface": "#1E151D",
+            "surfaceRaised": "#30252E",
+            "text": "#C59F61",
+            "textMuted": "#A58555",
+            "border": "#433330",
+            "accent": "#DB924C",
+            "onAccent": "#110802",
+            "success": "#9DB787",
+            "warning": "#FFD260",
+            "danger": "#FC9581",
+            "userBubble": "#DB924C",
+            "userBubbleText": "#110802",
+            "agentBubble": "#120A11",
+            "agentBubbleText": "#C59F61",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_HIGH_CONTRAST = {
+    "id": "high-contrast",
+    "name": "High Contrast",
+    "tagline": "Big type, strong edges, no fades. Easy to read for everyone, everywhere.",
+    "family": "enterprise",
+    "inspiredBy": [
+        "GitHub Primer light/dark high-contrast themes (primer/primitives)",
+        "GOV.UK Design System (alphagov/govuk-frontend)"
+    ],
+    "font": {
+        "body": "Atkinson Hyperlegible Next",
+        "heading": "Atkinson Hyperlegible Next",
+        "scale": {
+            "caption": 16,
+            "body": 19,
+            "title": 24,
+            "display": 36
+        },
+        "weights": {
+            "body": 400,
+            "strong": 700,
+            "title": 700
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.32,
+            "title": 1.25
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 0,
+            "md": 0,
+            "lg": 0,
+            "xl": 0
+        },
+        "borderWidth": 2,
+        "launcher": "square"
+    },
+    "spacing": {
+        "unit": 5,
+        "cardPadding": 20,
+        "gap": 15
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 2,
+            "spread": 0,
+            "opacity": 0.03,
+            "color": "#010409"
+        },
+        "floating": {
+            "y": 6,
+            "blur": 18,
+            "spread": 0,
+            "opacity": 0.12,
+            "color": "#25292E"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 0,
+        "easing": "none",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "filled",
+        "stroke": 2,
+        "launcher": "microphone"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "colors": {
+        "light": {
+            "background": "#FFFFFF",
+            "surface": "#E6EAEF",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#010409",
+            "textMuted": "#454C54",
+            "border": "#454C54",
+            "accent": "#0349B4",
+            "onAccent": "#FFFFFF",
+            "success": "#04591F",
+            "warning": "#603700",
+            "danger": "#960D1E",
+            "userBubble": "#0349B4",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#E6EAEF",
+            "agentBubbleText": "#010409",
+            "scrim": "#393F46"
+        },
+        "dark": {
+            "background": "#010409",
+            "surface": "#151B23",
+            "surfaceRaised": "#212830",
+            "text": "#FFFFFF",
+            "textMuted": "#B7BDC8",
+            "border": "#B7BDC8",
+            "accent": "#194FB1",
+            "onAccent": "#FFFFFF",
+            "success": "#2BD853",
+            "warning": "#F0B72F",
+            "danger": "#FF9492",
+            "userBubble": "#194FB1",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#151B23",
+            "agentBubbleText": "#FFFFFF",
+            "scrim": "#D1D7E0"
+        }
+    }
+};
+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 DEFAULT_DESIGN_PRESET = "graine-classic";
+export function designPreset(id) {
+    const want = String(id ?? "").trim().toLowerCase();
+    return DESIGN_PRESETS.find((p) => p.id === want) ?? DESIGN_PRESETS[0];
+}
+function pick(v, allowed) {
+    const s = String(v ?? "").trim().toLowerCase();
+    return allowed.includes(s) ? s : undefined;
+}
+function fontFamily(v) {
+    const s = String(v ?? "").trim();
+    if (!s)
+        return undefined;
+    const hit = DESIGN_FONTS.find((f) => f.family.toLowerCase() === s.toLowerCase());
+    return hit ? hit.family : undefined;
+}
+export function normaliseDesignConfig(raw) {
+    const r = (raw && typeof raw === "object" ? raw : {});
+    const out = { preset: designPreset(r.preset).id };
+    const accent = normaliseHex(r.accent);
+    if (accent)
+        out.accent = accent;
+    const scheme = pick(r.scheme, DESIGN_SCHEMES);
+    if (scheme)
+        out.scheme = scheme;
+    if (typeof r.roundness === "number" && Number.isFinite(r.roundness)) {
+        out.roundness = Math.round(Math.max(0, Math.min(2, r.roundness)) * 100) / 100;
+    }
+    const font = fontFamily(r.font);
+    if (font)
+        out.font = font;
+    const heading = fontFamily(r.headingFont);
+    if (heading)
+        out.headingFont = heading;
+    const density = pick(r.density, DESIGN_DENSITIES);
+    if (density)
+        out.density = density;
+    const shadow = pick(r.shadow, DESIGN_SHADOWS);
+    if (shadow)
+        out.shadow = shadow;
+    const motion = pick(r.motion, DESIGN_MOTIONS);
+    if (motion)
+        out.motion = motion;
+    const neutral = pick(r.neutral, DESIGN_NEUTRALS);
+    if (neutral)
+        out.neutral = neutral;
+    if (typeof r.glass === "boolean")
+        out.glass = r.glass;
+    const bubbles = pick(r.bubbles, DESIGN_BUBBLES);
+    if (bubbles)
+        out.bubbles = bubbles;
+    const icon = String(r.launcherIcon ?? "").trim().toLowerCase();
+    if (icon === "logo" || LAUNCHER_ICONS.some((i) => i.id === icon))
+        out.launcherIcon = icon;
+    const shape = pick(r.launcherShape, LAUNCHER_SHAPES);
+    if (shape)
+        out.launcherShape = shape;
+    const iconStyle = pick(r.iconStyle, ICON_STYLES);
+    if (iconStyle)
+        out.iconStyle = iconStyle;
+    return out;
+}
+export function designFromAppearance(appearance) {
+    const a = (appearance && typeof appearance === "object" ? appearance : {});
+    if (a.design && typeof a.design === "object")
+        return normaliseDesignConfig(a.design);
+    const legacy = { preset: DEFAULT_DESIGN_PRESET };
+    if (normaliseHex(a.accent))
+        legacy.accent = a.accent;
+    const scheme = pick(a.theme, DESIGN_SCHEMES);
+    if (scheme)
+        legacy.scheme = scheme;
+    const radius = typeof a.radius === "number" ? a.radius : Number(a.radius);
+    if (Number.isFinite(radius) && radius >= 0)
+        legacy.roundness = radius / GRAINE_CLASSIC.shape.radius.lg;
+    return normaliseDesignConfig(legacy);
+}
+export function legacyAppearanceFor(config) {
+    const tokens = resolveTokens(config, "light");
+    return { accent: tokens.colors.accent, radius: tokens.shape.radius.lg, theme: config.scheme ?? "auto" };
+}
+const DENSITY_SCALE = { compact: 0.8, comfortable: 1, spacious: 1.25 };
+export const ON_ACCENT_MIN = 3;
+const SHADOWS = {
+    none: { card: null, floating: null },
+    soft: {
+        card: { y: 1, blur: 4, spread: 0, opacity: 0.06, color: "#000000" },
+        floating: { y: 6, blur: 18, spread: 0, opacity: 0.12, color: "#000000" },
+    },
+    medium: {
+        card: { y: 2, blur: 10, spread: 0, opacity: 0.1, color: "#000000" },
+        floating: { y: 10, blur: 28, spread: 0, opacity: 0.18, color: "#000000" },
+    },
+    strong: {
+        card: { y: 4, blur: 16, spread: 0, opacity: 0.16, color: "#000000" },
+        floating: { y: 16, blur: 40, spread: -4, opacity: 0.28, color: "#000000" },
+    },
+};
+const MOTIONS = {
+    none: { durationMs: 0, easing: "none", bounce: 0 },
+    subtle: { durationMs: 150, easing: "standard", bounce: 0 },
+    lively: { durationMs: 320, easing: "spring", bounce: 0.3 },
+};
+const NEUTRAL_TINT = {
+    cool: "#3B6FD9",
+    neutral: "#808080",
+    warm: "#D9822B",
+};
+function tintNeutrals(c, neutral, scheme) {
+    if (neutral === "preset")
+        return c;
+    const tint = NEUTRAL_TINT[neutral];
+    const t = neutral === "neutral" ? 0.0 : scheme === "light" ? 0.05 : 0.07;
+    const grey = (hex) => {
+        if (neutral !== "neutral")
+            return mixHex(hex, tint, t);
+        const [r, g, b] = rgb(hex);
+        const y = Math.round(0.2126 * r + 0.7152 * g + 0.0722 * b);
+        return toHex(y, y, y);
+    };
+    return {
+        ...c,
+        background: grey(c.background),
+        surface: grey(c.surface),
+        surfaceRaised: grey(c.surfaceRaised),
+        border: grey(c.border),
+        agentBubble: grey(c.agentBubble),
+    };
+}
+export function resolveTokens(configInput, scheme) {
+    const config = normaliseDesignConfig(configInput);
+    const p = designPreset(config.preset);
+    const base = p.colors[scheme];
+    let c = tintNeutrals({ ...base }, config.neutral ?? "preset", scheme);
+    if (config.accent) {
+        const followsAccent = base.userBubble.toUpperCase() === base.accent.toUpperCase();
+        c = { ...c, accent: config.accent };
+        if (followsAccent)
+            c.userBubble = config.accent;
+    }
+    const bubbles = config.bubbles ?? p.bubbles;
+    const colors = {
+        ...c,
+        text: ensureContrast(c.text, c.background),
+        textMuted: ensureContrast(c.textMuted, c.surface, 4.5),
+        onAccent: contrastRatio(c.onAccent, c.accent) >= ON_ACCENT_MIN ? c.onAccent : readableOn(c.accent, [c.onAccent, "#FFFFFF", "#101318"]),
+        userBubbleText: contrastRatio(c.userBubbleText, c.userBubble) >= ON_ACCENT_MIN ? c.userBubbleText : readableOn(c.userBubble, [c.userBubbleText, "#FFFFFF", "#101318"]),
+        agentBubbleText: ensureContrast(c.agentBubbleText, c.agentBubble),
+        accentSoft: mixHex(c.surface, c.accent, scheme === "light" ? 0.12 : 0.22),
+    };
+    const k = config.roundness ?? 1;
+    const r = (v) => Math.round(Math.min(48, v * k));
+    const radius = { sm: r(p.shape.radius.sm), md: r(p.shape.radius.md), lg: r(p.shape.radius.lg), xl: r(p.shape.radius.xl) };
+    const d = DENSITY_SCALE[config.density ?? "comfortable"];
+    const spacing = {
+        unit: p.spacing.unit,
+        cardPadding: Math.round(p.spacing.cardPadding * d),
+        gap: Math.round(p.spacing.gap * d),
+    };
+    const shadow = config.shadow ?? "preset";
+    let elevation;
+    let borderWidth = p.shape.borderWidth;
+    if (shadow === "preset")
+        elevation = p.elevation;
+    else if (shadow === "hard") {
+        elevation = { card: null, floating: null, hardOffset: { x: 4, y: 4 } };
+        borderWidth = Math.max(2, borderWidth);
+    }
+    else
+        elevation = { ...SHADOWS[shadow], hardOffset: null };
+    if (scheme === "dark" && elevation.card)
+        elevation = { ...elevation, card: { ...elevation.card, opacity: Math.min(0.5, elevation.card.opacity * 2) } };
+    const motion = !config.motion || config.motion === "preset" ? p.motion : MOTIONS[config.motion];
+    const glass = config.glass === false ? null : config.glass === true ? (p.glass ?? { blur: 20, surfaceOpacity: 0.72 }) : p.glass;
+    const iconId = config.launcherIcon ?? p.icons.launcher;
+    const glyph = iconId === "logo" ? null : LAUNCHER_ICONS.find((i) => i.id === iconId) ?? LAUNCHER_ICONS[0];
+    return {
+        v: 1,
+        preset: p.id,
+        scheme,
+        colors,
+        font: {
+            ...p.font,
+            body: config.font ?? p.font.body,
+            heading: config.headingFont ?? config.font ?? p.font.heading,
+        },
+        shape: { radius, borderWidth, launcher: config.launcherShape ?? p.shape.launcher },
+        spacing,
+        elevation,
+        motion,
+        icons: {
+            style: config.iconStyle ?? p.icons.style,
+            stroke: p.icons.stroke,
+            launcher: glyph ? { id: glyph.id, path: glyph.path, stroke: glyph.stroke } : null,
+        },
+        glass,
+        bubbles,
+    };
+}
+export function resolveDesign(configInput) {
+    const config = normaliseDesignConfig(configInput);
+    return { config, light: resolveTokens(config, "light"), dark: resolveTokens(config, "dark") };
+}
+export function pickTokens(design, deviceScheme) {
+    const s = design.config.scheme ?? "auto";
+    if (s === "light")
+        return design.light;
+    if (s === "dark")
+        return design.dark;
+    return deviceScheme === "dark" ? design.dark : design.light;
+}
+export const GLYPH_ASSET_VERSION = 2;
+export function glyphParams(raw) {
+    const id = String(raw.id ?? "").trim().toLowerCase();
+    const color = normaliseHex(raw.color) ?? "#FFFFFF";
+    const size = Math.round(Math.max(16, Math.min(512, Number(raw.size) || 96)));
+    const stroke = Math.max(0.5, Math.min(4, Number(raw.stroke) || 2));
+    return { id, color, size, stroke: Math.round(stroke * 4) / 4 };
+}
+export function glyphUrl(origin, id, color, sizePx, stroke = 2) {
+    const p = glyphParams({ id, color, size: sizePx, stroke });
+    const base = String(origin || "https://www.graine.ai").replace(/\/+$/, "");
+    return `${base}/api/embed/glyph?id=${encodeURIComponent(p.id)}&c=${p.color.slice(1)}&s=${p.size}&w=${p.stroke}&v=${GLYPH_ASSET_VERSION}`;
+}
+export function encodeDesignParam(config) {
+    const json = JSON.stringify(normaliseDesignConfig(config));
+    const b64 = typeof btoa === "function"
+        ? btoa(unescape(encodeURIComponent(json)))
+        : globalThis.Buffer.from(json, "utf8").toString("base64");
+    return b64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+export function decodeDesignParam(param) {
+    if (!param)
+        return null;
+    try {
+        const b64 = param.replace(/-/g, "+").replace(/_/g, "/");
+        const json = typeof atob === "function"
+            ? decodeURIComponent(escape(atob(b64)))
+            : globalThis.Buffer.from(b64, "base64").toString("utf8");
+        return normaliseDesignConfig(JSON.parse(json));
+    }
+    catch {
+        return null;
+    }
+}