@graineai/inapp-react-native 0.35.0 → 0.37.0

package/dist/react-native/widget.js

@@ -4,6 +4,9 @@ import { Image, Modal, Platform, Pressable, ScrollView, Text, View, useColorSche
 import { Ctx, useGraineWidget } from "./index.js";
 import { GraineLoader } from "./loader.js";
 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 { 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());
@@ -12,55 +15,127 @@ function tint(hex, alpha) {
     const n = parseInt(m[1], 16);
     return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
 }
+const CLASSIC_SCALE = designPreset(DEFAULT_DESIGN_PRESET).font.scale;
+function classicSkin(theme, accent, radius) {
+    return {
+        classic: true,
+        size: (today) => today,
+        weight: (today) => today,
+        family: () => undefined,
+        line: (today) => today,
+        space: (today) => today,
+        pad: (h, v) => ({ paddingHorizontal: h, paddingVertical: v }),
+        gap: (compact) => (compact ? 6 : 10),
+        borderWidth: 1,
+        soft: (a) => tint(accent, a),
+        chip: tint(theme.border, 0.35),
+        choice: { fill: accent, text: theme.onAccent },
+        sheet: theme.surface,
+        page: theme.surface,
+        scrim: "rgba(0,0,0,0.45)",
+        rowRadius: Math.max(10, radius - 6),
+        imageRadius: Math.max(8, radius - 8),
+        slotRadius: 11,
+        sheetRadius: Math.max(20, radius),
+        depth: {
+            shadow: { shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 12, shadowOffset: { width: 0, height: 4 }, elevation: 6 },
+            hard: null, ink: "#000",
+        },
+        anim: (want) => want,
+    };
+}
+function designSkin(look, theme, accent, radius, ownRadius, surfaceOverride) {
+    const t = look.tokens;
+    const f = t.font;
+    const density = t.spacing.cardPadding / 14;
+    return {
+        classic: false,
+        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),
+        line: (_today, size, title) => lineHeight(size, title ? f.lineHeight.title : f.lineHeight.body),
+        space: (today) => Math.round(today * density),
+        pad: () => ({ paddingHorizontal: t.spacing.cardPadding, paddingVertical: t.spacing.cardPadding }),
+        gap: (compact) => (compact ? Math.round(t.spacing.gap * 0.6) : t.spacing.gap),
+        borderWidth: t.shape.borderWidth,
+        soft: () => softFor(accent, t),
+        chip: softFor(accent, t),
+        choice: { fill: softFor(accent, t), text: theme.text },
+        sheet: surfaceOverride ?? t.colors.surface,
+        page: surfaceOverride ?? t.colors.background,
+        scrim: alpha(t.colors.scrim, 0.4),
+        rowRadius: ownRadius ? Math.max(10, radius - 6) : t.shape.radius.md,
+        imageRadius: ownRadius ? Math.max(8, radius - 8) : t.shape.radius.sm,
+        slotRadius: t.shape.radius.md,
+        sheetRadius: ownRadius ? Math.max(20, radius) : t.shape.radius.xl,
+        depth: { shadow: shadowStyle(t.elevation.card), hard: t.elevation.hardOffset, ink: t.colors.text },
+        anim: (want) => (look.durationMs > 0 ? want : "none"),
+    };
+}
+function Raised({ k, style, children }) {
+    if (k.classic || !k.depth.hard) {
+        return _jsx(View, { style: k.classic ? style : [style, k.depth.shadow], children: children });
+    }
+    const { marginBottom, borderRadius, ...rest } = style;
+    const h = k.depth.hard;
+    return (_jsxs(View, { style: { marginBottom: (marginBottom ?? 0) + h.y, marginRight: h.x }, children: [_jsx(View, { pointerEvents: "none", style: { position: "absolute", top: h.y, left: h.x, right: -h.x, bottom: -h.y, borderRadius, backgroundColor: k.depth.ink } }), _jsx(View, { style: { ...rest, borderRadius, borderColor: k.depth.ink }, children: children })] }));
+}
 const HERO_HEIGHT = { small: 100, medium: 140, large: 180 };
 const THUMB = { small: 56, medium: 72, large: 96 };
 const LIST_THUMB = { small: 36, medium: 44, large: 56 };
-function WidgetRow({ row, variant, look, grammar, theme, accent, radius, picked, onPick, }) {
+function WidgetRow({ row, variant, look, grammar, theme, accent, k, picked, onPick, }) {
     const many = picked !== null;
-    const r = Math.max(10, radius - 6);
+    const r = k.rowRadius;
     const tight = look.density === "compact";
-    const pad = (variant === "list" ? (tight ? 6 : 9) : (tight ? 7 : 10)) + grammar.padBoost;
-    const gap = tight ? 6 : 10;
+    const pad = k.space(variant === "list" ? (tight ? 6 : 9) : (tight ? 7 : 10)) + grammar.padBoost;
+    const gap = k.gap(tight);
+    const edge = (on) => (on ? k.borderWidth + 1 : k.borderWidth);
     const rowIsButton = many || look.button === "row";
     const outline = look.button === "outline";
     const label = row.unavailable ? "Unavailable" : row.selectLabel;
     const a11y = `${row.selectLabel}: ${row.title}`;
     const badge = row.subtitle ? (_jsx(View, { style: { flexDirection: "row" }, children: _jsx(Text, { style: {
-                color: accent, fontSize: 10.5, fontWeight: "800", letterSpacing: 0.4,
-                textTransform: "uppercase", backgroundColor: tint(accent, 0.15),
+                color: accent, fontSize: k.size(10.5, "caption"), fontWeight: k.weight("800", "strong"), letterSpacing: 0.4,
+                textTransform: "uppercase", backgroundColor: k.soft(0.15), fontFamily: k.family(),
                 borderRadius: 999, paddingHorizontal: 8, paddingVertical: 3, overflow: "hidden",
             }, children: row.subtitle }) })) : null;
-    const titleLine = (big) => (_jsxs(View, { style: { flexDirection: "row", alignItems: "baseline", gap: 8 }, children: [_jsx(Text, { numberOfLines: 2, style: { color: theme.text, fontSize: big ? 16.5 : (variant === "list" ? 13.5 : 14.5), fontWeight: grammar.titleWeight, flex: 1 }, children: row.title }), row.price ? (_jsx(Text, { style: {
-                    color: theme.text, fontSize: big ? 17 : (variant === "list" ? 13.5 : 14.5), fontWeight: "800",
-                    fontVariant: ["tabular-nums"],
+    const titleLine = (big) => (_jsxs(View, { style: { flexDirection: "row", alignItems: "baseline", gap: 8 }, children: [_jsx(Text, { numberOfLines: 2, style: {
+                    color: theme.text, fontWeight: grammar.titleWeight, flex: 1,
+                    fontSize: big ? k.size(16.5, "title", true) : k.size(variant === "list" ? 13.5 : 14.5, "body"),
+                    fontFamily: k.family(big),
+                }, children: row.title }), row.price ? (_jsx(Text, { style: {
+                    color: theme.text, fontSize: big ? k.size(17, "title") : k.size(variant === "list" ? 13.5 : 14.5, "body"), fontWeight: k.weight("800", "strong"),
+                    fontVariant: ["tabular-nums"], fontFamily: k.family(),
                 }, children: row.price })) : null] }));
     const facts = look.facts && row.facts.length ? (_jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 6, marginTop: 2 }, children: (variant === "list" ? row.facts.slice(0, 2) : row.facts).map((f, i) => (_jsx(Text, { style: {
-                color: theme.muted, fontSize: variant === "list" ? 10.5 : 11.5, fontWeight: "600",
-                backgroundColor: grammar.chipOutlined ? "transparent" : tint(theme.border, 0.35),
-                borderWidth: grammar.chipOutlined ? 1 : 0, borderColor: theme.border,
+                color: theme.muted, fontSize: k.size(variant === "list" ? 10.5 : 11.5, "caption"), fontWeight: k.weight("600", "strong"),
+                fontFamily: k.family(),
+                backgroundColor: grammar.chipOutlined ? "transparent" : k.chip,
+                borderWidth: grammar.chipOutlined ? k.borderWidth : 0, borderColor: theme.border,
                 borderRadius: grammar.chipRadius, paddingHorizontal: variant === "list" ? 6 : 8, paddingVertical: variant === "list" ? 2 : 4, overflow: "hidden",
             }, children: f }, `${f}-${i}`))) })) : null;
     const tick = (_jsx(View, { style: {
             width: 22, height: 22, borderRadius: 999, alignItems: "center", justifyContent: "center",
             backgroundColor: picked ? accent : "transparent",
-            borderWidth: picked ? 0 : 1.5, borderColor: theme.border,
+            borderWidth: picked ? 0 : k.borderWidth + 0.5, borderColor: theme.border,
         }, children: picked ? _jsx(Text, { style: { color: theme.onAccent, fontSize: 12, fontWeight: "800" }, children: "\u2713" }) : null }));
     const button = (wide) => (_jsx(Pressable, { disabled: row.unavailable, onPress: onPick, accessibilityRole: "button", accessibilityLabel: a11y, hitSlop: wide ? undefined : 8, style: {
             minHeight: 44, justifyContent: "center", alignItems: "center",
             borderRadius: wide ? grammar.buttonRadius : (grammar.pillButtons ? 999 : grammar.buttonRadius), paddingHorizontal: wide ? 12 : 14,
             marginTop: wide ? 8 : 0,
             backgroundColor: row.unavailable || outline ? "transparent" : accent,
-            borderWidth: row.unavailable || outline ? 1.5 : 0,
+            borderWidth: row.unavailable || outline ? k.borderWidth + 0.5 : 0,
             borderColor: row.unavailable ? theme.border : accent,
         }, children: _jsx(Text, { style: {
                 color: row.unavailable ? theme.muted : (outline ? accent : theme.onAccent),
-                fontSize: wide ? 14 : 12.5, fontWeight: "700",
+                fontSize: wide ? k.size(14, "body") : k.size(12.5, "caption"), fontWeight: k.weight("700", "strong"),
+                fontFamily: k.family(),
             }, children: label }) }));
-    const image = (style) => row.image ? (_jsx(Image, { source: { uri: row.image }, accessibilityIgnoresInvertColors: true, resizeMode: "cover", style: { borderRadius: Math.max(8, radius - 8), backgroundColor: theme.border, ...style } })) : null;
+    const image = (style) => row.image ? (_jsx(Image, { source: { uri: row.image }, accessibilityIgnoresInvertColors: true, resizeMode: "cover", style: { borderRadius: k.imageRadius, backgroundColor: theme.border, ...style } })) : null;
     const wrap = (children, style) => rowIsButton ? (_jsx(Pressable, { disabled: row.unavailable, onPress: onPick, accessibilityRole: "button", accessibilityLabel: a11y, style: style, children: children })) : (_jsx(View, { style: style, children: children }));
     if (variant === "hero") {
         return wrap(_jsxs(_Fragment, { children: [image({ width: "100%", height: HERO_HEIGHT[look.imageSize] }), _jsxs(View, { style: { gap: 3 }, children: [badge, titleLine(true), facts, many ? null : rowIsButton ? null : button(true)] }), many ? _jsx(View, { style: { position: "absolute", top: pad + 6, right: pad + 6 }, children: tick }) : null] }), {
-            borderRadius: r, borderWidth: picked ? 2 : 1, borderColor: picked ? accent : theme.border, padding: pad,
+            borderRadius: r, borderWidth: edge(picked), borderColor: picked ? accent : theme.border, padding: pad,
             opacity: row.unavailable ? 0.55 : 1, gap, flexDirection: "column",
         });
     }
@@ -69,13 +144,13 @@ function WidgetRow({ row, variant, look, grammar, theme, accent, radius, picked,
         return wrap(_jsxs(_Fragment, { children: [image({ width: t, height: t }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 2 }, children: [titleLine(false), facts] }), many ? tick : rowIsButton ? (_jsx(Text, { style: { color: theme.muted, fontSize: 22, fontWeight: "600", paddingLeft: 4 }, children: "›" })) : button(false)] }), {
             flexDirection: "row", alignItems: "center", gap,
             paddingVertical: pad, paddingHorizontal: 2, minHeight: 44,
-            borderBottomWidth: 1, borderBottomColor: theme.border, marginLeft: grammar.separatorInset,
+            borderBottomWidth: k.borderWidth, borderBottomColor: theme.border, marginLeft: grammar.separatorInset,
             opacity: row.unavailable ? 0.55 : 1,
         });
     }
     if (variant === "compact") {
         return wrap(_jsxs(_Fragment, { children: [_jsxs(View, { style: { flex: 1, minWidth: 0, gap: 2 }, children: [badge, titleLine(false), facts] }), many ? tick : rowIsButton ? null : button(false)] }), {
-            borderRadius: r, borderWidth: picked ? 2 : 1, borderColor: picked ? accent : theme.border,
+            borderRadius: r, borderWidth: edge(picked), borderColor: picked ? accent : theme.border,
             paddingVertical: pad, paddingHorizontal: pad + 2,
             flexDirection: "row", alignItems: "center", gap,
             opacity: row.unavailable ? 0.55 : 1, minHeight: 44,
@@ -83,11 +158,11 @@ function WidgetRow({ row, variant, look, grammar, theme, accent, radius, picked,
     }
     const t = THUMB[look.imageSize];
     return wrap(_jsxs(_Fragment, { children: [image({ width: t, height: t }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 3 }, children: [badge, titleLine(false), facts] }), many ? tick : rowIsButton ? null : button(false)] }), {
-        borderRadius: r, borderWidth: picked ? 2 : 1, borderColor: picked ? accent : theme.border, padding: pad,
+        borderRadius: r, borderWidth: edge(picked), borderColor: picked ? accent : theme.border, padding: pad,
         opacity: row.unavailable ? 0.55 : 1, flexDirection: "row", gap, alignItems: "center",
     });
 }
-function AnsweredLine({ answered, theme, accent, radius, awaiting, onClear }) {
+function AnsweredLine({ answered, theme, accent, radius, k, awaiting, onClear }) {
     const d = (answered.data || {});
     const appearance = useContext(Ctx)?.appearance ?? null;
     const loaderText = resolveLoader(appearance?.loader).text.thinking;
@@ -96,31 +171,66 @@ function AnsweredLine({ answered, theme, accent, radius, awaiting, onClear }) {
     if (!title && !detail)
         return null;
     return (_jsxs(View, { style: {
-            backgroundColor: theme.surface, borderRadius: radius, borderWidth: 1, borderColor: theme.border,
-            paddingHorizontal: 12, paddingVertical: 10, marginBottom: 8,
+            backgroundColor: theme.surface, borderRadius: radius, borderWidth: k.borderWidth, borderColor: theme.border,
+            paddingHorizontal: k.space(12), paddingVertical: k.space(10), marginBottom: 8,
             flexDirection: "row", alignItems: "center", gap: 10,
         }, children: [_jsx(View, { style: {
-                    width: 26, height: 26, borderRadius: 999, backgroundColor: tint(accent, 0.18),
+                    width: 26, height: 26, borderRadius: 999, backgroundColor: k.soft(0.18),
                     alignItems: "center", justifyContent: "center",
-                }, children: awaiting ? _jsx(GraineLoader, { size: 14 }) : (_jsx(Text, { style: { color: accent, fontSize: 14, fontWeight: "800" }, children: "✓" })) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontSize: 13.5, fontWeight: "700" }, children: title || detail }), awaiting ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: 11.5, fontWeight: "600" }, children: loaderText })) : title && detail ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: 11.5, fontWeight: "600" }, children: detail })) : null] }), awaiting ? null : (_jsx(Pressable, { onPress: onClear, accessibilityRole: "button", accessibilityLabel: "Clear what I chose", hitSlop: 10, style: { minHeight: 44, justifyContent: "center", paddingHorizontal: 4 }, children: _jsx(Text, { style: { color: theme.muted, fontSize: 12, fontWeight: "700" }, children: "Clear" }) }))] }));
+                }, children: awaiting ? _jsx(GraineLoader, { size: 14 }) : (_jsx(Text, { style: { color: accent, fontSize: 14, fontWeight: "800" }, children: "✓" })) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontSize: k.size(13.5, "body"), fontWeight: k.weight("700", "strong"), fontFamily: k.family() }, children: title || detail }), awaiting ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: k.size(11.5, "caption"), fontWeight: k.weight("600", "body"), fontFamily: k.family() }, children: loaderText })) : title && detail ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: k.size(11.5, "caption"), fontWeight: k.weight("600", "body"), fontFamily: k.family() }, children: detail })) : null] }), awaiting ? null : (_jsx(Pressable, { onPress: onClear, accessibilityRole: "button", accessibilityLabel: "Clear what I chose", hitSlop: 10, style: { minHeight: 44, justifyContent: "center", paddingHorizontal: 4 }, children: _jsx(Text, { style: { color: theme.muted, fontSize: k.size(12, "caption"), fontWeight: k.weight("700", "strong"), fontFamily: k.family() }, children: "Clear" }) }))] }));
 }
 export function GraineWidget(props) {
     const { widget, answered, loading, awaitingReply, submit, dismiss } = useGraineWidget();
     const appearance = useContext(Ctx)?.appearance ?? null;
     const scheme = useColorScheme();
+    const design = useDesign();
     const [pagerWidth, setPagerWidth] = useState(0);
     const [page, setPage] = useState(0);
     const [ticked, setTicked] = useState([]);
     const look = resolveWidgetLook(widget?.style, widget?.kind);
-    const grammar = PLATFORM_GRAMMAR[resolvePlatform(look.platform, Platform.OS, Platform.constants?.Manufacturer ?? Platform.constants?.Brand)];
+    const phoneGrammar = PLATFORM_GRAMMAR[resolvePlatform(look.platform, Platform.OS, Platform.constants?.Manufacturer ?? Platform.constants?.Brand)];
     const dash = resolveNativeAppearance(appearance, { accent: "#318CE7", heading: "" });
-    const accent = props.accent ?? look.accent ?? dash.accent;
-    const radius = props.radius ?? look.radius ?? (look.platform !== "auto" ? grammar.radius : dash.radius);
-    const theme = {
-        ...resolveWidgetPalette(appearance, { scheme, accent }),
-        ...(props.theme ?? {}),
-    };
-    const chosen = answered ? (_jsx(AnsweredLine, { answered: answered, theme: theme, accent: accent, radius: radius, awaiting: awaitingReply, onClear: dismiss })) : null;
+    let accent;
+    let radius;
+    let theme;
+    let grammar;
+    let k;
+    if (design.classic) {
+        accent = props.accent ?? look.accent ?? dash.accent;
+        radius = props.radius ?? look.radius ?? (look.platform !== "auto" ? phoneGrammar.radius : dash.radius);
+        theme = {
+            ...resolveWidgetPalette(appearance, { scheme, accent }),
+            ...(props.theme ?? {}),
+        };
+        grammar = phoneGrammar;
+        k = classicSkin(theme, accent, radius);
+    }
+    else {
+        const t = design.tokens;
+        const own = look.platform !== "auto";
+        accent = props.accent ?? look.accent ?? t.colors.accent;
+        radius = props.radius ?? look.radius ?? (own ? phoneGrammar.radius : t.shape.radius.lg);
+        theme = {
+            surface: t.colors.surfaceRaised, border: t.colors.border, text: t.colors.text, muted: t.colors.textMuted,
+            onAccent: onAccentFor(accent, t),
+            ...(props.theme ?? {}),
+        };
+        grammar = own ? phoneGrammar : {
+            ...phoneGrammar,
+            radius: t.shape.radius.lg, chipRadius: t.shape.radius.sm, buttonRadius: t.shape.radius.md,
+            pillButtons: false, titleWeight: String(t.font.weights.title), padBoost: 0, chipOutlined: false,
+        };
+        k = designSkin(design, theme, accent, radius, own || props.radius !== undefined || look.radius !== undefined, props.theme?.surface);
+    }
+    const titleType = (today) => k.classic
+        ? { fontSize: today, fontWeight: "800" }
+        : {
+            fontSize: design.tokens.font.scale.title,
+            fontWeight: String(design.tokens.font.weights.title),
+            fontFamily: k.family(true),
+            letterSpacing: letterSpacing(design.tokens.font.scale.title, design.tokens.font.letterSpacing.title),
+        };
+    const chosen = answered ? (_jsx(AnsweredLine, { answered: answered, theme: theme, accent: accent, radius: radius, k: k, awaiting: awaitingReply, onClear: dismiss })) : null;
     if (!widget && loading) {
         const loader = resolveLoader(appearance?.loader);
         const kindSurface = widgetSurface(loading.kind);
@@ -128,14 +238,14 @@ export function GraineWidget(props) {
         const big = pendingSurface === "screen" ? 34 : pendingSurface === "sheet" ? 26 : undefined;
         const mark = (_jsx(View, { style: { alignItems: "center", gap: 10 }, children: _jsx(GraineLoader, { moment: "component", size: big, stacked: true }) }));
         const bone = (w, h) => (_jsx(View, { style: { width: w, height: h, borderRadius: 8, backgroundColor: tint(theme.border, 0.6) } }));
-        const bones = (rows) => (_jsx(View, { style: { gap: 10, opacity: 0.55 }, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: Array.from({ length: rows }, (_, i) => (_jsxs(View, { style: { borderRadius: Math.max(10, radius - 6), borderWidth: 1, borderColor: theme.border, padding: 10, flexDirection: "row", gap: 10, alignItems: "center" }, children: [bone(72, 72), _jsxs(View, { style: { flex: 1, gap: 8 }, children: [bone("70%", 12), bone("40%", 12), bone("55%", 10)] })] }, i))) }));
+        const bones = (rows) => (_jsx(View, { style: { gap: 10, opacity: 0.55 }, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: Array.from({ length: rows }, (_, i) => (_jsxs(View, { style: { borderRadius: k.rowRadius, borderWidth: k.borderWidth, borderColor: theme.border, padding: 10, flexDirection: "row", gap: 10, alignItems: "center" }, children: [bone(72, 72), _jsxs(View, { style: { flex: 1, gap: 8 }, children: [bone("70%", 12), bone("40%", 12), bone("55%", 10)] })] }, i))) }));
         if (pendingSurface === "screen") {
-            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", onRequestClose: dismiss, transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, children: _jsxs(View, { style: { flex: 1, backgroundColor: theme.surface, paddingTop: 56, paddingHorizontal: 18 }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close and keep talking", hitSlop: 10, style: { width: 44, height: 44, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: tint(theme.border, 0.4) }, children: _jsx(Text, { style: { color: theme.text, fontSize: 20, fontWeight: "600" }, children: "\u00D7" }) }), _jsx(View, { style: { flex: 1, justifyContent: "center", paddingBottom: loader.skeleton ? 24 : 72 }, children: mark }), loader.skeleton ? bones(3) : null] }) })] }));
+            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: k.anim("fade"), onRequestClose: dismiss, transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, children: _jsxs(View, { style: { flex: 1, backgroundColor: k.page, paddingTop: 56, paddingHorizontal: 18 }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close and keep talking", hitSlop: 10, style: { width: 44, height: 44, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: tint(theme.border, 0.4) }, children: _jsx(Text, { style: { color: theme.text, fontSize: 20, fontWeight: "600" }, children: "\u00D7" }) }), _jsx(View, { style: { flex: 1, justifyContent: "center", paddingBottom: loader.skeleton ? 24 : 72 }, children: mark }), loader.skeleton ? bones(3) : null] }) })] }));
         }
         if (pendingSurface === "sheet") {
-            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, onRequestClose: dismiss, children: _jsxs(View, { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.45)", justifyContent: "flex-end" }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close", style: { flex: 1 } }), _jsxs(View, { style: { backgroundColor: theme.surface, borderTopLeftRadius: Math.max(20, radius), borderTopRightRadius: Math.max(20, radius), paddingHorizontal: 18, paddingTop: 10, paddingBottom: 28, gap: 18 }, children: [_jsx(View, { style: { alignItems: "center" }, children: _jsx(View, { style: { width: grammar.grabber.width, height: grammar.grabber.height, borderRadius: 999, backgroundColor: theme.border } }) }), _jsx(View, { style: { paddingVertical: loader.skeleton ? 10 : 34 }, children: mark }), loader.skeleton ? bones(2) : null] })] }) })] }));
+            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: k.anim("fade"), transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, onRequestClose: dismiss, children: _jsxs(View, { style: { flex: 1, backgroundColor: k.scrim, justifyContent: "flex-end" }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close", style: { flex: 1 } }), _jsxs(View, { style: { backgroundColor: k.sheet, borderTopLeftRadius: k.sheetRadius, borderTopRightRadius: k.sheetRadius, paddingHorizontal: 18, paddingTop: 10, paddingBottom: 28, gap: 18 }, children: [_jsx(View, { style: { alignItems: "center" }, children: _jsx(View, { style: { width: grammar.grabber.width, height: grammar.grabber.height, borderRadius: 999, backgroundColor: theme.border } }) }), _jsx(View, { style: { paddingVertical: loader.skeleton ? 10 : 34 }, children: mark }), loader.skeleton ? bones(2) : null] })] }) })] }));
         }
-        return (_jsxs(_Fragment, { children: [chosen, _jsx(View, { style: { backgroundColor: theme.surface, borderRadius: radius, borderWidth: 1, borderColor: theme.border, paddingHorizontal: 14, paddingVertical: 14, marginBottom: 8, alignItems: "center" }, children: _jsx(GraineLoader, { moment: "component" }) })] }));
+        return (_jsxs(_Fragment, { children: [chosen, _jsx(Raised, { k: k, style: { backgroundColor: theme.surface, borderRadius: radius, borderWidth: k.borderWidth, borderColor: theme.border, ...k.pad(14, 14), marginBottom: 8, alignItems: "center" }, children: _jsx(GraineLoader, { moment: "component" }) })] }));
     }
     if (!widget)
         return chosen;
@@ -214,24 +324,24 @@ export function GraineWidget(props) {
         }, manySummary(titles, normalised.selectLabel.toLowerCase()));
         setTicked([]);
     };
-    const body = (_jsx(_Fragment, { children: isCalendar ? (_jsxs(View, { style: { gap: 12 }, children: [data.note ? (_jsx(Text, { style: { color: theme.muted, fontSize: 12.5, lineHeight: 18 }, children: String(data.note) })) : null, data.days.slice(0, 4).map((d, di) => {
+    const body = (_jsx(_Fragment, { children: isCalendar ? (_jsxs(View, { style: { gap: 12 }, children: [data.note ? (_jsx(Text, { style: { color: theme.muted, fontSize: k.size(12.5, "caption", true), lineHeight: k.line(18, k.size(12.5, "caption", true)), fontFamily: k.family() }, children: String(data.note) })) : null, data.days.slice(0, 4).map((d, di) => {
                     const dayLabel = String(d?.label ?? d?.id ?? `Day ${di + 1}`);
                     const slots = Array.isArray(d?.slots) ? d.slots.map(String) : [];
                     if (!slots.length)
                         return null;
-                    return (_jsxs(View, { style: { gap: 7 }, children: [_jsx(Text, { style: { color: theme.text, fontSize: 13, fontWeight: "700" }, children: dayLabel }), _jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 }, children: slots.slice(0, 8).map((slot, si) => (_jsx(Pressable, { onPress: () => submit({ day: dayLabel, slot }, `${dayLabel} at ${slot}, please.`), accessibilityRole: "button", accessibilityLabel: `${dayLabel} at ${slot}`, style: {
+                    return (_jsxs(View, { style: { gap: 7 }, children: [_jsx(Text, { style: { color: theme.text, fontSize: k.size(13, "body"), fontWeight: k.weight("700", "strong"), fontFamily: k.family() }, children: dayLabel }), _jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 }, children: slots.slice(0, 8).map((slot, si) => (_jsx(Pressable, { onPress: () => submit({ day: dayLabel, slot }, `${dayLabel} at ${slot}, please.`), accessibilityRole: "button", accessibilityLabel: `${dayLabel} at ${slot}`, style: {
                                         minHeight: 44, justifyContent: "center",
-                                        borderWidth: 1, borderColor: theme.border, borderRadius: 11,
+                                        borderWidth: k.borderWidth, borderColor: theme.border, borderRadius: k.slotRadius,
                                         paddingHorizontal: 14,
-                                    }, children: _jsx(Text, { style: { color: theme.text, fontSize: 13.5, fontWeight: "600" }, children: slot }) }, `${slot}-${si}`))) })] }, `${dayLabel}-${di}`));
+                                    }, children: _jsx(Text, { style: { color: theme.text, fontSize: k.size(13.5, "body"), fontWeight: k.weight("600", "strong"), fontFamily: k.family() }, children: slot }) }, `${slot}-${si}`))) })] }, `${dayLabel}-${di}`));
                 })] })) : isProducts ? ((() => {
             const toggle = (id) => setTicked((cur) => cur.includes(id) ? cur.filter((x) => x !== id)
                 : cur.length >= look.maxSelect ? [...cur.slice(1), id]
                     : [...cur, id]);
-            const draw = (row, i, variant) => (_jsx(WidgetRow, { row: row, variant: variant, look: look, grammar: grammar, theme: theme, accent: accent, radius: radius, picked: many ? ticked.includes(row.id) : null, onPick: () => many
+            const draw = (row, i, variant) => (_jsx(WidgetRow, { row: row, variant: variant, look: look, grammar: grammar, theme: theme, accent: accent, k: k, picked: many ? ticked.includes(row.id) : null, onPick: () => many
                     ? toggle(row.id)
                     : pick({ ...normalised.items[i], id: row.id, title: row.title, price: row.price }) }, `${row.id}-${i}`));
-            const gap = look.density === "compact" ? 6 : 10;
+            const gap = k.gap(look.density === "compact");
             if (look.preset === "spotlight") {
                 const cardW = pagerWidth ? Math.round(pagerWidth * 0.86) : 300;
                 const step = cardW + gap;
@@ -265,7 +375,7 @@ export function GraineWidget(props) {
                             backgroundColor: chosenRows.length < 2 ? tint(theme.border, 0.5) : accent,
                         }, children: _jsx(Text, { style: {
                                 color: chosenRows.length < 2 ? theme.muted : theme.onAccent,
-                                fontSize: 14.5, fontWeight: "700",
+                                fontSize: k.size(14.5, "body"), fontWeight: k.weight("700", "strong"), fontFamily: k.family(),
                             }, children: chosenRows.length < 2
                                 ? `Pick ${2 - chosenRows.length} more to ${normalised.selectLabel.toLowerCase()}`
                                 : `${normalised.selectLabel} ${chosenRows.length}` }) })] }));
@@ -273,37 +383,37 @@ export function GraineWidget(props) {
                 const label = String(o?.label ?? o?.title ?? o ?? "");
                 const id = String(o?.id ?? label);
                 return (_jsx(Pressable, { onPress: () => submit(isQuickActions ? { id, label } : { chosen: id, label }, `I'll go with ${label}.`), accessibilityRole: "button", accessibilityLabel: label, style: {
-                        backgroundColor: accent, borderRadius: 999,
+                        backgroundColor: k.choice.fill, borderRadius: 999,
                         minHeight: 44, justifyContent: "center", paddingHorizontal: 16,
-                    }, children: _jsx(Text, { style: { color: theme.onAccent, fontSize: 13.5, fontWeight: "700" }, children: label }) }, `${id}-${i}`));
-            }) })) : (_jsx(Text, { style: { color: theme.text, fontSize: 14, lineHeight: 20 }, children: widget.fallbackText || "The assistant has something to show you." })) }));
+                    }, children: _jsx(Text, { style: { color: k.choice.text, fontSize: k.size(13.5, "body"), fontWeight: k.weight("700", "strong"), fontFamily: k.family() }, children: label }) }, `${id}-${i}`));
+            }) })) : (_jsx(Text, { style: { color: theme.text, fontSize: k.size(14, "body", true), lineHeight: k.line(20, k.size(14, "body", true)), fontFamily: k.family() }, children: widget.fallbackText || "The assistant has something to show you." })) }));
     const title = data?.title ? String(data.title) : "";
     const prompt = data?.prompt ? String(data.prompt) : "";
     if (surface === "screen") {
-        return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "slide", onRequestClose: dismiss, transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, children: _jsxs(View, { style: { flex: 1, backgroundColor: theme.surface }, children: [_jsxs(View, { style: {
+        return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: k.anim("slide"), onRequestClose: dismiss, transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, children: _jsxs(View, { style: { flex: 1, backgroundColor: k.page }, children: [_jsxs(View, { style: {
                                     paddingTop: 52, paddingHorizontal: 18, paddingBottom: 12,
                                     flexDirection: "row", alignItems: "center", gap: 12,
                                 }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close and keep talking", hitSlop: 10, style: {
                                             width: 44, height: 44, borderRadius: 999, alignItems: "center", justifyContent: "center",
                                             backgroundColor: tint(theme.border, 0.4),
-                                        }, children: _jsx(Text, { style: { color: theme.text, fontSize: 20, fontWeight: "600" }, children: "×" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [title ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontSize: 18, fontWeight: "800" }, children: title })) : null, prompt ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: 12.5, fontWeight: "600", marginTop: 1 }, children: prompt })) : null] })] }), _jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { paddingHorizontal: 18, paddingBottom: 24 }, keyboardShouldPersistTaps: "handled", children: body }), _jsxs(View, { style: {
+                                        }, children: _jsx(Text, { style: { color: theme.text, fontSize: 20, fontWeight: "600" }, children: "×" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [title ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.text, ...titleType(18) }, children: title })) : null, prompt ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: k.size(12.5, "caption", true), fontWeight: k.weight("600", "body"), fontFamily: k.family(), marginTop: 1 }, children: prompt })) : null] })] }), _jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { paddingHorizontal: 18, paddingBottom: 24 }, keyboardShouldPersistTaps: "handled", children: body }), _jsxs(View, { style: {
                                     paddingHorizontal: 18, paddingTop: 12, paddingBottom: 28,
-                                    borderTopWidth: 1, borderTopColor: theme.border,
-                                }, children: [_jsx(Text, { style: { color: theme.muted, fontSize: 10.5, fontWeight: "800", letterSpacing: 0.4, textTransform: "uppercase" }, children: "Still listening" }), _jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontSize: 13.5, marginTop: 2 }, children: prompt || "Tap one, or just say it." })] })] }) })] }));
+                                    borderTopWidth: k.borderWidth, borderTopColor: theme.border,
+                                }, children: [_jsx(Text, { style: { color: theme.muted, fontSize: k.size(10.5, "caption"), fontWeight: k.weight("800", "strong"), fontFamily: k.family(), letterSpacing: 0.4, textTransform: "uppercase" }, children: "Still listening" }), _jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontSize: k.size(13.5, "body", true), fontFamily: k.family(), marginTop: 2 }, children: prompt || "Tap one, or just say it." })] })] }) })] }));
     }
     if (surface === "sheet") {
-        return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "slide", transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, onRequestClose: dismiss, children: _jsxs(View, { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.45)", justifyContent: "flex-end" }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close", style: { flex: 1 } }), _jsxs(View, { style: {
-                                    backgroundColor: theme.surface,
-                                    borderTopLeftRadius: Math.max(20, radius), borderTopRightRadius: Math.max(20, radius),
+        return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: k.anim("slide"), transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, onRequestClose: dismiss, children: _jsxs(View, { style: { flex: 1, backgroundColor: k.scrim, justifyContent: "flex-end" }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close", style: { flex: 1 } }), _jsxs(View, { style: {
+                                    backgroundColor: k.sheet,
+                                    borderTopLeftRadius: k.sheetRadius, borderTopRightRadius: k.sheetRadius,
                                     paddingHorizontal: 18, paddingTop: 10, paddingBottom: 28, gap: 14,
-                                }, children: [_jsx(View, { style: { alignItems: "center" }, children: _jsx(View, { style: { width: grammar.grabber.width, height: grammar.grabber.height, borderRadius: 999, backgroundColor: theme.border } }) }), title ? (_jsx(Text, { style: { color: theme.text, fontSize: 18, fontWeight: "800" }, children: title })) : null, prompt ? (_jsx(Text, { style: { color: theme.muted, fontSize: 13, lineHeight: 18, marginTop: -8 }, children: prompt })) : null, _jsx(ScrollView, { style: { maxHeight: 420 }, contentContainerStyle: { paddingBottom: 4 }, keyboardShouldPersistTaps: "handled", children: body }), _jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "None of these", style: {
+                                }, children: [_jsx(View, { style: { alignItems: "center" }, children: _jsx(View, { style: { width: grammar.grabber.width, height: grammar.grabber.height, borderRadius: 999, backgroundColor: theme.border } }) }), title ? (_jsx(Text, { style: { color: theme.text, ...titleType(18) }, children: title })) : null, prompt ? (_jsx(Text, { style: { color: theme.muted, fontSize: k.size(13, "caption", true), lineHeight: k.line(18, k.size(13, "caption", true)), fontFamily: k.family(), marginTop: -8 }, children: prompt })) : null, _jsx(ScrollView, { style: { maxHeight: 420 }, contentContainerStyle: { paddingBottom: 4 }, keyboardShouldPersistTaps: "handled", children: body }), _jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "None of these", style: {
                                             alignSelf: "flex-start", minHeight: 44, justifyContent: "center",
                                             paddingHorizontal: 16, borderRadius: 999, backgroundColor: tint(theme.border, 0.4),
-                                        }, children: _jsx(Text, { style: { color: theme.text, fontSize: 13.5, fontWeight: "700" }, children: "None of these" }) })] })] }) })] }));
+                                        }, 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" }) })] })] }) })] }));
     }
-    return (_jsxs(_Fragment, { children: [chosen, _jsxs(View, { style: {
-                    backgroundColor: theme.surface, borderRadius: radius, borderWidth: 1, borderColor: theme.border,
-                    paddingHorizontal: 14, paddingVertical: 12, marginBottom: 8,
-                    shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 12, shadowOffset: { width: 0, height: 4 }, elevation: 6,
-                }, children: [title ? (_jsx(Text, { style: { color: theme.text, fontSize: 14.5, fontWeight: "800", marginBottom: 2 }, children: title })) : null, prompt ? (_jsx(Text, { style: { color: theme.muted, fontSize: 12.5, lineHeight: 17, 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: 12.5, fontWeight: "600" }, children: "Dismiss" }) })] })] }));
+    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,
+                    ...(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" }) })] })] }));
 }

package/dist/theme.d.ts

@@ -0,0 +1,206 @@
+export type DesignScheme = "auto" | "light" | "dark";
+export type DesignDensity = "compact" | "comfortable" | "spacious";
+export type DesignShadow = "preset" | "none" | "soft" | "medium" | "strong" | "hard";
+export type DesignMotion = "preset" | "none" | "subtle" | "lively";
+export type DesignNeutral = "preset" | "cool" | "neutral" | "warm";
+export type DesignBubbles = "filled" | "outline" | "minimal";
+export type LauncherShape = "circle" | "squircle" | "rounded-square" | "square" | "pill";
+export type IconStyle = "outline" | "filled" | "duotone" | "sharp";
+export type MotionEasing = "standard" | "emphasized" | "spring" | "linear" | "none";
+export type DesignFamily = "graine" | "native" | "modern" | "enterprise" | "expressive";
+export interface DesignConfig {
+    preset: string;
+    accent?: string;
+    scheme?: DesignScheme;
+    roundness?: number;
+    font?: string;
+    headingFont?: string;
+    density?: DesignDensity;
+    shadow?: DesignShadow;
+    motion?: DesignMotion;
+    neutral?: DesignNeutral;
+    glass?: boolean;
+    bubbles?: DesignBubbles;
+    launcherIcon?: string;
+    launcherShape?: LauncherShape;
+    iconStyle?: IconStyle;
+}
+export interface ThemeColors {
+    background: string;
+    surface: string;
+    surfaceRaised: string;
+    text: string;
+    textMuted: string;
+    border: string;
+    accent: string;
+    onAccent: string;
+    accentSoft: string;
+    success: string;
+    warning: string;
+    danger: string;
+    userBubble: string;
+    userBubbleText: string;
+    agentBubble: string;
+    agentBubbleText: string;
+    scrim: string;
+}
+export interface ThemeShadow {
+    y: number;
+    blur: number;
+    spread: number;
+    opacity: number;
+    color: string;
+}
+export interface ThemeTokens {
+    v: 1;
+    preset: string;
+    scheme: "light" | "dark";
+    colors: ThemeColors;
+    font: {
+        body: string;
+        heading: string;
+        scale: {
+            caption: number;
+            body: number;
+            title: number;
+            display: number;
+        };
+        weights: {
+            body: number;
+            strong: number;
+            title: number;
+        };
+        letterSpacing: {
+            body: number;
+            title: number;
+        };
+        lineHeight: {
+            body: number;
+            title: number;
+        };
+    };
+    shape: {
+        radius: {
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+        };
+        borderWidth: number;
+        launcher: LauncherShape;
+    };
+    spacing: {
+        unit: number;
+        cardPadding: number;
+        gap: number;
+    };
+    elevation: {
+        card: ThemeShadow | null;
+        floating: ThemeShadow | null;
+        hardOffset: {
+            x: number;
+            y: number;
+        } | null;
+    };
+    motion: {
+        durationMs: number;
+        easing: MotionEasing;
+        bounce: number;
+    };
+    icons: {
+        style: IconStyle;
+        stroke: number;
+        launcher: {
+            id: string;
+            path: string;
+            stroke: boolean;
+        } | null;
+    };
+    glass: {
+        blur: number;
+        surfaceOpacity: number;
+    } | null;
+    bubbles: DesignBubbles;
+}
+export interface ResolvedDesign {
+    config: DesignConfig;
+    light: ThemeTokens;
+    dark: ThemeTokens;
+}
+export interface DesignPreset {
+    id: string;
+    name: string;
+    tagline: string;
+    family: DesignFamily;
+    inspiredBy: string[];
+    font: ThemeTokens["font"];
+    shape: ThemeTokens["shape"];
+    spacing: ThemeTokens["spacing"];
+    elevation: ThemeTokens["elevation"];
+    motion: ThemeTokens["motion"];
+    icons: {
+        style: IconStyle;
+        stroke: number;
+        launcher: string;
+    };
+    glass: ThemeTokens["glass"];
+    bubbles: DesignBubbles;
+    colors: {
+        light: Omit<ThemeColors, "accentSoft">;
+        dark: Omit<ThemeColors, "accentSoft">;
+    };
+}
+export declare const DESIGN_SCHEMES: ReadonlyArray<DesignScheme>;
+export declare const DESIGN_DENSITIES: ReadonlyArray<DesignDensity>;
+export declare const DESIGN_SHADOWS: ReadonlyArray<DesignShadow>;
+export declare const DESIGN_MOTIONS: ReadonlyArray<DesignMotion>;
+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 function normaliseHex(value: unknown): string | null;
+export declare function mixHex(a: string, b: string, t: number): string;
+export declare function luminanceOf(hex: string): number;
+export declare function contrastRatio(a: string, b: string): number;
+export declare function readableOn(bg: string, candidates?: ReadonlyArray<string>): string;
+export declare function ensureContrast(fg: string, bg: string, min?: number): string;
+export declare const LAUNCHER_ICONS: ReadonlyArray<{
+    id: string;
+    label: string;
+    path: string;
+    stroke: boolean;
+}>;
+export declare const DESIGN_FONTS: ReadonlyArray<{
+    family: string;
+    category: "sans" | "serif" | "mono" | "display";
+    scripts: string[];
+}>;
+export declare const DESIGN_PRESETS: ReadonlyArray<DesignPreset>;
+export declare const DEFAULT_DESIGN_PRESET = "graine-classic";
+export declare function designPreset(id: unknown): DesignPreset;
+export declare function normaliseDesignConfig(raw: unknown): DesignConfig;
+export declare function designFromAppearance(appearance: unknown): DesignConfig;
+export declare function legacyAppearanceFor(config: DesignConfig): {
+    accent: string;
+    radius: number;
+    theme: DesignScheme;
+};
+export declare const ON_ACCENT_MIN = 3;
+export declare function resolveTokens(configInput: DesignConfig, scheme: "light" | "dark"): ThemeTokens;
+export declare function resolveDesign(configInput: unknown): ResolvedDesign;
+export declare function pickTokens(design: ResolvedDesign, deviceScheme: "light" | "dark" | null | undefined): ThemeTokens;
+export declare const GLYPH_ASSET_VERSION = 2;
+export declare function glyphParams(raw: {
+    id?: unknown;
+    color?: unknown;
+    size?: unknown;
+    stroke?: unknown;
+}): {
+    id: string;
+    color: string;
+    size: number;
+    stroke: number;
+};
+export declare function glyphUrl(origin: string, id: string, color: string, sizePx: number, stroke?: number): string;
+export declare function encodeDesignParam(config: DesignConfig): string;
+export declare function decodeDesignParam(param: string | null | undefined): DesignConfig | null;