@thewhileloop/whileui 4.2.3 → 4.4.0

package/dist/components/toast/toast.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { Pressable, View } from 'react-native';
-import Animated, { SlideInUp, SlideOutUp } from 'react-native-reanimated';
+import { AccessibilityInfo, Platform, Pressable, View } from 'react-native';
+import Animated, { FadeOut, SlideInUp } from 'react-native-reanimated';
 import { Text } from '../text';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
+import { useMotionPolicy } from '../../lib/motion-policy';
 import { tv } from '../../lib/tv';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
@@ -17,15 +19,11 @@ export function useToast() {
     return context;
 }
 let toastId = 0;
-const TEXT_COLOR_BY_VARIANT = {
-    default: 'text-foreground',
-    destructive: 'text-destructive-foreground',
-    success: 'text-success-foreground',
-};
-const DESCRIPTION_COLOR_BY_VARIANT = {
-    default: 'text-muted-foreground',
-    destructive: 'text-destructive-foreground-muted',
-    success: 'text-success-foreground-muted',
+/** Status variants carry a small dot, not a fill, so every toast sits on the theme's surface. */
+const ACCENT_BY_VARIANT = {
+    default: undefined,
+    destructive: 'bg-destructive',
+    success: 'bg-success',
 };
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
@@ -44,12 +42,12 @@ export function ToastProvider({ children }) {
     return _jsx(ToastContext.Provider, { value: contextValue, children: children });
 }
 const toastVariants = tv({
-    base: 'w-full flex-row items-center justify-between border',
+    base: 'w-full flex-row items-center gap-3 border bg-popover',
     variants: {
         variant: {
-            default: 'border-border bg-background',
-            destructive: 'border-destructive bg-destructive',
-            success: 'border-success bg-success',
+            default: 'border-border',
+            destructive: 'border-destructive-soft-border',
+            success: 'border-success-soft-border',
         },
     },
     defaultVariants: {
@@ -60,31 +58,51 @@ function Toast({ toast: toastData, onDismiss, className, style, ...props }) {
     const { title, description, variant = 'default', duration = 4000, action } = toastData;
     const visual = useVisualTokens();
     const colors = useThemeColors();
+    const motion = useMotionPolicy();
+    const accent = ACCENT_BY_VARIANT[variant];
     useEffect(() => {
         if (duration > 0) {
             const timer = setTimeout(onDismiss, duration);
             return () => clearTimeout(timer);
         }
     }, [duration, onDismiss]);
-    const textColor = TEXT_COLOR_BY_VARIANT[variant];
-    const descColor = DESCRIPTION_COLOR_BY_VARIANT[variant];
-    return (_jsxs(Animated.View, { entering: SlideInUp.duration(300), exiting: SlideOutUp.duration(200), className: cn(toastVariants({ variant }), className), style: [
-            {
-                borderRadius: surfaceRadius(visual, 'lg'),
-                borderWidth: visual.borderWidthHairline,
-                padding: surfacePadding(visual, 'sm'),
-            },
-            shadowStyle(visual, colors, 'lg'),
-            style,
-        ], ...props, children: [_jsxs(View, { className: "flex-1 gap-1", children: [title && (_jsx(Text, { className: cn('font-semibold', textColor), style: typographyStyle(visual, 'label'), children: title })), description && (_jsx(Text, { className: cn(descColor), style: typographyStyle(visual, 'label'), children: description }))] }), _jsxs(View, { className: "flex-row items-center gap-2", children: [action && (_jsx(Pressable, { accessibilityRole: "button", onPress: () => {
-                            action.onPress();
-                            onDismiss();
-                        }, className: "border border-border", style: {
-                            borderRadius: visual.radiusMd,
-                            borderWidth: visual.borderWidthControl,
-                            paddingHorizontal: visual.controlPaddingXSm,
-                            paddingVertical: visual.controlPaddingYSm,
-                        }, children: _jsx(Text, { className: cn('font-medium', textColor), style: typographyStyle(visual, 'label'), children: action.label }) })), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dismiss", onPress: onDismiss, className: "p-1", children: _jsx(Text, { className: cn(textColor), style: typographyStyle(visual, 'emphasis'), children: "\u00D7" }) })] })] }));
+    // Android and the web announce through the live region below; iOS has no live
+    // regions, so it is told once, when the toast appears.
+    useEffect(() => {
+        if (Platform.OS !== 'ios')
+            return;
+        const message = [title, description].filter(Boolean).join('. ');
+        if (message)
+            AccessibilityInfo.announceForAccessibility(message);
+        // Announce on appearance only; a re-render must not repeat it.
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- once per toast, by design
+    }, []);
+    return (_jsx(Animated.View, { entering: motion.animationsEnabled ? SlideInUp.duration(motion.durations.normal) : undefined, exiting: motion.animationsEnabled ? FadeOut.duration(motion.durations.fast) : undefined, children: _jsxs(View
+        // Announced where it appears, without moving focus. Set before the spread so a
+        // caller can still override.
+        , { 
+            // Announced where it appears, without moving focus. Set before the spread so a
+            // caller can still override.
+            accessibilityRole: "alert", accessibilityLiveRegion: "polite", className: cn(toastVariants({ variant }), className), style: [
+                {
+                    borderRadius: surfaceRadius(visual, 'lg'),
+                    borderWidth: visual.borderWidthHairline,
+                    padding: surfacePadding(visual, 'sm'),
+                },
+                shadowStyle(visual, colors, 'lg'),
+                style,
+            ], ...props, children: [_jsxs(View, { className: "flex-1 gap-0.5", children: [title ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [accent ? _jsx(View, { className: cn('h-2 w-2 rounded-full', accent) }) : null, _jsx(Text, { className: "font-semibold text-popover-foreground", style: typographyStyle(visual, 'label'), children: title })] })) : null, description ? (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'label'), children: description })) : null] }), action ? (_jsx(Pressable, { accessibilityRole: "button", onPress: () => {
+                        action.onPress();
+                        onDismiss();
+                    }, className: cn('border border-border active:bg-state-pressed', focusRing), style: {
+                        borderRadius: visual.radiusMd,
+                        borderWidth: visual.borderWidthControl,
+                        paddingHorizontal: visual.controlPaddingXSm,
+                        paddingVertical: visual.controlPaddingYSm,
+                    }, children: _jsx(Text, { className: "font-medium text-popover-foreground", style: typographyStyle(visual, 'label'), children: action.label }) })) : null, _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dismiss", onPress: onDismiss, 
+                    // 44 px everywhere, since hitSlop does nothing on the web; the negative margin
+                    // keeps the toast as compact as the old 32 px button left it.
+                    hitSlop: 2, className: cn('-my-1.5 -mr-1.5 h-11 w-11 items-center justify-center rounded-full active:bg-state-pressed', focusRing), children: _jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'emphasis'), children: "\u00D7" }) })] }) }));
 }
 function ToastContainerItem({ toast, dismiss, }) {
     const handleDismiss = useCallback(() => dismiss(toast.id), [dismiss, toast.id]);
@@ -94,6 +112,6 @@ export function ToastContainer({ position = 'top', className, style, ...props })
     const { toasts, dismiss } = useToast();
     const visual = useVisualTokens();
     const positionClass = position === 'top' ? 'top-0' : 'bottom-0';
-    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: toasts.map((toast) => (_jsx(ToastContainerItem, { toast: toast, dismiss: dismiss }, toast.id))) }));
+    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: _jsx(View, { className: "w-full max-w-md self-center", pointerEvents: "box-none", children: toasts.map((toast) => (_jsx(ToastContainerItem, { toast: toast, dismiss: dismiss }, toast.id))) }) }));
 }
 export { Toast, toastVariants };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { registerFrostedBlurView, type FrostedSurfaceProps, type FrostedTintToke
 export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadius, shadowStyle, typographyStyle, useControlRecipe, useFieldRecipe, useSurfaceRecipe, useShadowStyle, useTypography, type ControlSize, type SurfacePaddingSize, type SurfaceRecipeOptions, type ShadowTier, type TypographyRole, } from './lib/recipes';
 export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, type ThemePreset, } from './lib/theme-presets';
 export { deriveThemeColors, THEME_BASE_TOKEN_KEYS, type ThemeBaseColors } from './lib/theme-derive';
+export { checkThemeContrast, themeFromSeeds, type ContrastCheck, type ThemeSeeds, } from './lib/theme-seeds';
 export { Text, textVariants, type TextProps } from './components/text';
 export { Surface, type SurfaceLevel, type SurfaceProps } from './components/surface';
 export { View, type ViewProps } from './components/view';
@@ -29,7 +30,7 @@ export { OTPInput, otpCellVariants, type OTPInputProps } from './components/otp-
 export { FormField, FormLabel, FormControl, FormHint, FormMessage, useFormFieldState, formFieldVariants, formControlVariants, type FormFieldProps, type FormLabelProps, type FormControlProps, type FormHintProps, type FormMessageProps, type FormFieldState, } from './components/form-field';
 export { LabeledField, LabeledFieldControl, type LabeledFieldProps, type LabeledFieldControlProps, } from './components/labeled-field';
 export { Badge, BadgeText, badgeVariants, badgeTextVariants, type BadgeProps, type BadgeTextProps, } from './components/badge';
-export { FAB, FABGroup, fabVariants, type FabProps, type FabGroupProps } from './components/fab';
+export { FAB, FABGroup, fabClearance, fabVariants, type FabProps, type FabGroupProps, } from './components/fab';
 export { Alert, AlertTitle, AlertDescription, alertVariants, type AlertProps, type AlertTitleProps, type AlertDescriptionProps, } from './components/alert';
 export { Switch, type SwitchProps } from './components/switch';
 export { Checkbox, type CheckboxProps } from './components/checkbox';

package/dist/index.js

@@ -15,6 +15,7 @@ export { registerFrostedBlurView, } from './lib/frosted-surface';
 export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadius, shadowStyle, typographyStyle, useControlRecipe, useFieldRecipe, useSurfaceRecipe, useShadowStyle, useTypography, } from './lib/recipes';
 export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, } from './lib/theme-presets';
 export { deriveThemeColors, THEME_BASE_TOKEN_KEYS } from './lib/theme-derive';
+export { checkThemeContrast, themeFromSeeds, } from './lib/theme-seeds';
 export { Text, textVariants } from './components/text';
 export { Surface } from './components/surface';
 export { View } from './components/view';
@@ -29,7 +30,7 @@ export { OTPInput, otpCellVariants } from './components/otp-input';
 export { FormField, FormLabel, FormControl, FormHint, FormMessage, useFormFieldState, formFieldVariants, formControlVariants, } from './components/form-field';
 export { LabeledField, LabeledFieldControl, } from './components/labeled-field';
 export { Badge, BadgeText, badgeVariants, badgeTextVariants, } from './components/badge';
-export { FAB, FABGroup, fabVariants } from './components/fab';
+export { FAB, FABGroup, fabClearance, fabVariants, } from './components/fab';
 export { Alert, AlertTitle, AlertDescription, alertVariants, } from './components/alert';
 export { Switch } from './components/switch';
 export { Checkbox } from './components/checkbox';

package/dist/lib/dismiss-keyboard-on-open.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+import type { LayoutPosition } from '@rn-primitives/hooks';
+interface Measurable {
+    measure: (callback: (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void) => void;
+}
+/**
+ * Closes the keyboard when a portal overlay opens, then measures its trigger again.
+ *
+ * `Select` and `Popover` draw in a portal rather than a Modal, so iOS and Android leave the
+ * keyboard up and it covers the lower half of the content. Closing it moves any
+ * keyboard-avoiding screen, which leaves the trigger away from where it was measured on
+ * press, so the position is taken again once the keyboard has gone. Modal-hosted overlays
+ * need none of this: the platform closes the keyboard when the Modal's window takes focus.
+ */
+export declare function useDismissKeyboardOnOpen(open: boolean, triggerRef: RefObject<Measurable | null>, setTriggerPosition: (position: LayoutPosition) => void): void;
+export {};

package/dist/lib/dismiss-keyboard-on-open.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { Keyboard, Platform } from 'react-native';
+/**
+ * Closes the keyboard when a portal overlay opens, then measures its trigger again.
+ *
+ * `Select` and `Popover` draw in a portal rather than a Modal, so iOS and Android leave the
+ * keyboard up and it covers the lower half of the content. Closing it moves any
+ * keyboard-avoiding screen, which leaves the trigger away from where it was measured on
+ * press, so the position is taken again once the keyboard has gone. Modal-hosted overlays
+ * need none of this: the platform closes the keyboard when the Modal's window takes focus.
+ */
+export function useDismissKeyboardOnOpen(open, triggerRef, setTriggerPosition) {
+    useEffect(() => {
+        if (!open || Platform.OS === 'web' || !Keyboard.isVisible())
+            return;
+        const subscription = Keyboard.addListener('keyboardDidHide', () => {
+            triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => setTriggerPosition({ width, height, pageX, pageY }));
+        });
+        Keyboard.dismiss();
+        return () => subscription.remove();
+    }, [open, triggerRef, setTriggerPosition]);
+}

package/dist/lib/frosted-surface.d.ts

@@ -3,8 +3,11 @@ import { type ViewStyle } from 'react-native';
 export type FrostedTintToken = 'surfaceElevated' | 'surfaceTranslucent' | 'card' | 'popover';
 export type FrostedBlurPreset = 'subtle' | 'medium' | 'strong';
 export interface FrostedSurfaceProps {
+    /** Enable the optional frosted overlay. */
     frosted?: boolean;
+    /** Override blur amount directly. */
     blurIntensity?: number;
+    /** Tint token used for frosted mode. */
     blurTintToken?: FrostedTintToken;
 }
 interface UseFrostedSurfaceOptions extends FrostedSurfaceProps {

package/dist/lib/recipes.d.ts

@@ -22,6 +22,26 @@ export declare function surfacePadding(visual: VisualTokens, padding?: SurfacePa
 export declare function surfaceRadius(visual: VisualTokens, radius?: 'sm' | 'md' | 'lg' | 'xl'): number;
 export declare function surfaceRecipe(visual: VisualTokens, options?: SurfaceRecipeOptions): ViewStyle;
 export declare function shadowStyle(visual: VisualTokens, colors: ThemeColors, tier: ShadowTier): ViewStyle;
+/**
+ * Caret and selection colours for a text field: the theme's primary, where React Native
+ * would otherwise use the platform blue. iOS tints the caret, handles and highlight from
+ * `selectionColor` alone. Android paints `selectionColor` as the highlight at full
+ * strength, which would hide the selected text, so it gets a translucent highlight and
+ * the caret and handles take the solid colour. The web keeps the browser's caret.
+ */
+export declare function textCursorColors(colors: ThemeColors): {
+    cursorColor: string;
+    selectionHandleColor: string;
+    selectionColor: string;
+} | {
+    selectionColor: string;
+    cursorColor?: undefined;
+    selectionHandleColor?: undefined;
+} | {
+    cursorColor?: undefined;
+    selectionHandleColor?: undefined;
+    selectionColor?: undefined;
+};
 export declare function typographyStyle(visual: VisualTokens, role: TypographyRole): TextStyle;
 export declare function useControlRecipe(size?: ControlSize): ViewStyle;
 export declare function useFieldRecipe(size?: ControlSize): ViewStyle;

package/dist/lib/recipes.js

@@ -108,17 +108,34 @@ export function shadowStyle(visual, colors, tier) {
                 offsetX: 0,
                 offsetY,
                 blurRadius: radius * 2,
-                color: shadowColorWithOpacity(colors.shadow, opacity),
+                color: colorWithOpacity(colors.shadow, opacity),
             },
         ],
     };
 }
-function shadowColorWithOpacity(color, opacity) {
+function colorWithOpacity(color, opacity) {
     const parsed = parse(color);
     if (!parsed)
         return color;
     return formatRgb({ ...parsed, alpha: opacity });
 }
+/**
+ * Caret and selection colours for a text field: the theme's primary, where React Native
+ * would otherwise use the platform blue. iOS tints the caret, handles and highlight from
+ * `selectionColor` alone. Android paints `selectionColor` as the highlight at full
+ * strength, which would hide the selected text, so it gets a translucent highlight and
+ * the caret and handles take the solid colour. The web keeps the browser's caret.
+ */
+export function textCursorColors(colors) {
+    if (Platform.OS === 'android') {
+        return {
+            cursorColor: colors.primary,
+            selectionHandleColor: colors.primary,
+            selectionColor: colorWithOpacity(colors.primary, 0.3),
+        };
+    }
+    return Platform.OS === 'ios' ? { selectionColor: colors.primary } : {};
+}
 // Component-owned text sizes. Font family/weight stays on className
 // (font-medium etc.) so app font mappings keep working.
 export function typographyStyle(visual, role) {

package/dist/lib/theme-bridge.d.ts

@@ -14,10 +14,19 @@ export interface UseThemeBridgeOptions {
     adapter?: ThemeBridgeAdapter;
 }
 export interface UseThemeBridgeResult {
+    /** The chosen mode, `system` included. */
     mode: ThemeMode;
+    /** The theme on screen: `light`, `dark`, or a registered custom theme. */
     resolvedTheme: string;
     setMode: (mode: ThemeMode) => void;
+    /**
+     * Steps light → dark → system. For a control that shows all three modes; a two-state
+     * sun/moon button wants `toggleTheme`, because a step into `system` that resolves to
+     * the theme already on screen looks like a tap that did nothing.
+     */
     cycleMode: () => void;
+    /** Switches to the opposite of the theme on screen: dark from light, light from anything else. */
+    toggleTheme: () => void;
 }
 export declare function applyThemeMode(mode: ThemeMode): void;
 export declare function resolveThemeMode(adapter?: ThemeBridgeAdapter, fallback?: ThemeMode): Promise<ThemeMode>;

package/dist/lib/theme-bridge.js

@@ -101,12 +101,14 @@ export function useThemeBridge({ initialMode = 'system', adapter, } = {}) {
         dispatch({ type: 'select', mode });
     }, []);
     const cycleMode = useCallback(() => dispatch({ type: 'cycle' }), []);
+    const toggleTheme = useCallback(() => dispatch({ type: 'select', mode: theme === 'light' ? 'dark' : 'light' }), [theme]);
     return useMemo(() => ({
         mode: state.mode,
         resolvedTheme: theme,
         setMode,
         cycleMode,
-    }), [cycleMode, setMode, state.mode, theme]);
+        toggleTheme,
+    }), [cycleMode, setMode, state.mode, theme, toggleTheme]);
 }
 function ControlledThemeBridge({ mode, adapter, }) {
     useEffect(() => {

package/dist/lib/theme-contract.js

@@ -13,16 +13,16 @@ export const WHILEUI_LIGHT_THEME_COLORS = {
     mutedForeground: '#645783',
     border: 'rgba(68, 87, 255, 0.16)',
     input: 'rgba(255, 255, 255, 0.84)',
-    ring: 'rgba(61, 139, 255, 0.34)',
+    ring: '#3d8bff',
     accent: '#a7f432',
     accentForeground: '#163218',
-    destructive: '#f66151',
+    destructive: '#d03d31',
     destructiveForeground: '#fff8f6',
-    success: '#13a86d',
+    success: '#00864d',
     successForeground: '#f5fff9',
     warning: '#ffb224',
     warningForeground: '#3d2200',
-    info: '#3d8bff',
+    info: '#2070e1',
     infoForeground: '#f8fbff',
     overlay: 'rgba(39, 31, 72, 0.14)',
     overlayStrong: 'rgba(39, 31, 72, 0.22)',
@@ -37,19 +37,19 @@ export const WHILEUI_LIGHT_THEME_COLORS = {
     shadow: '#271f48',
     primaryActive: '#3346e6',
     secondaryActive: 'rgba(255, 123, 92, 0.18)',
-    destructiveActive: '#e0503f',
+    destructiveActive: '#bb261d',
     primarySoft: 'rgba(68, 87, 255, 0.13)',
     primarySoftSubtle: 'rgba(68, 87, 255, 0.07)',
     secondarySoft: 'rgba(255, 123, 92, 0.16)',
     mutedSoft: 'rgba(74, 55, 122, 0.05)',
-    destructiveSoft: 'rgba(246, 97, 81, 0.12)',
-    destructiveSoftBorder: 'rgba(246, 97, 81, 0.30)',
-    successSoft: 'rgba(19, 168, 109, 0.12)',
-    successSoftBorder: 'rgba(19, 168, 109, 0.30)',
+    destructiveSoft: 'rgba(208, 61, 49, 0.12)',
+    destructiveSoftBorder: 'rgba(208, 61, 49, 0.30)',
+    successSoft: 'rgba(0, 134, 77, 0.12)',
+    successSoftBorder: 'rgba(0, 134, 77, 0.30)',
     warningSoft: 'rgba(255, 178, 36, 0.14)',
     warningSoftBorder: 'rgba(255, 178, 36, 0.34)',
-    infoSoft: 'rgba(61, 139, 255, 0.12)',
-    infoSoftBorder: 'rgba(61, 139, 255, 0.30)',
+    infoSoft: 'rgba(32, 112, 225, 0.12)',
+    infoSoftBorder: 'rgba(32, 112, 225, 0.30)',
     placeholder: '#645783',
 };
 export const WHILEUI_DARK_THEME_COLORS = {
@@ -67,7 +67,7 @@ export const WHILEUI_DARK_THEME_COLORS = {
     mutedForeground: '#c5bad9',
     border: 'rgba(255, 255, 255, 0.12)',
     input: 'rgba(27, 18, 49, 0.86)',
-    ring: 'rgba(127, 240, 197, 0.36)',
+    ring: '#7ff0c5',
     accent: '#7ff0c5',
     accentForeground: '#0f2d24',
     destructive: '#ff6b57',

package/dist/lib/theme-presets.js

@@ -38,7 +38,7 @@ export const WHILEUI_PRESET_SOFT = {
 };
 // Compact geometry, hairline-plus borders, real drop shadows, warm ink.
 const ATELIER_LIGHT = {
-    primary: '#b4552d',
+    primary: '#af5028',
     primaryForeground: '#fdf6ee',
     foreground: '#2b2118',
     background: '#f6efe4',
@@ -49,10 +49,10 @@ const ATELIER_LIGHT = {
     secondary: 'rgba(43, 33, 24, 0.06)',
     secondaryForeground: '#4a3a2a',
     muted: 'rgba(43, 33, 24, 0.05)',
-    mutedForeground: '#7a6a58',
+    mutedForeground: '#716150',
     border: 'rgba(43, 33, 24, 0.22)',
     input: '#fffdf8',
-    ring: 'rgba(180, 85, 45, 0.45)',
+    ring: '#af5028',
     accent: '#1f6f54',
     accentForeground: '#f0faf5',
     destructive: '#b3261e',
@@ -70,15 +70,15 @@ const ATELIER_LIGHT = {
     surfaceTranslucentBorder: 'rgba(43, 33, 24, 0.16)',
     surfaceBorder: 'rgba(43, 33, 24, 0.22)',
     surfaceHighlight: 'rgba(255, 255, 255, 0.65)',
-    stateHover: 'rgba(180, 85, 45, 0.07)',
-    statePressed: 'rgba(180, 85, 45, 0.14)',
+    stateHover: 'rgba(175, 80, 40, 0.07)',
+    statePressed: 'rgba(175, 80, 40, 0.14)',
     stateDisabled: 'rgba(122, 106, 88, 0.30)',
     shadow: '#3a2c1c',
     primaryActive: '#96431f',
     secondaryActive: 'rgba(43, 33, 24, 0.12)',
     destructiveActive: '#8f1d17',
-    primarySoft: 'rgba(180, 85, 45, 0.12)',
-    primarySoftSubtle: 'rgba(180, 85, 45, 0.06)',
+    primarySoft: 'rgba(175, 80, 40, 0.12)',
+    primarySoftSubtle: 'rgba(175, 80, 40, 0.06)',
     secondarySoft: 'rgba(31, 111, 84, 0.10)',
     mutedSoft: 'rgba(43, 33, 24, 0.04)',
     destructiveSoft: 'rgba(179, 38, 30, 0.10)',
@@ -89,7 +89,7 @@ const ATELIER_LIGHT = {
     warningSoftBorder: 'rgba(192, 123, 18, 0.36)',
     infoSoft: 'rgba(47, 93, 158, 0.10)',
     infoSoftBorder: 'rgba(47, 93, 158, 0.32)',
-    placeholder: '#7a6a58',
+    placeholder: '#716150',
 };
 const ATELIER_DARK = {
     primary: '#e8935f',
@@ -106,7 +106,7 @@ const ATELIER_DARK = {
     mutedForeground: '#a3937d',
     border: 'rgba(239, 230, 216, 0.18)',
     input: '#211a14',
-    ring: 'rgba(232, 147, 95, 0.45)',
+    ring: '#e8935f',
     accent: '#6fd0a8',
     accentForeground: '#0b2419',
     destructive: '#e5695f',

package/dist/lib/theme-seeds.d.ts

@@ -0,0 +1,40 @@
+import type { ThemeColors } from './theme-contract';
+import { type ThemeBaseColors } from './theme-derive';
+import { type ThemePreset } from './theme-presets';
+import type { VisualTokens } from './visual-token-contract';
+export interface ThemeSeeds {
+    /** Page background. */
+    background: string;
+    /** Body text. */
+    foreground: string;
+    /** Brand colour: primary buttons, links, focus ring. */
+    primary: string;
+    /** Second voice for highlights and selected states. Derived from `primary` if left out. */
+    accent?: string;
+}
+/**
+ * A complete preset from seeds. `light` is required; `dark` defaults to a dark page with
+ * the same brand colours. `overrides` replaces any base colour before the rest is
+ * derived, so nothing is out of reach; derived tokens can be adjusted on the result.
+ */
+export declare function themeFromSeeds(input: {
+    name: string;
+    description: string;
+    light: ThemeSeeds;
+    dark?: ThemeSeeds;
+    overrides?: {
+        light?: Partial<ThemeBaseColors>;
+        dark?: Partial<ThemeBaseColors>;
+    };
+    visual?: Partial<VisualTokens>;
+}): ThemePreset;
+export interface ContrastCheck {
+    /** "foreground on background" */
+    pair: string;
+    ratio: number;
+    /** 4.5 for text, 3 for focus rings and other non-text UI (WCAG 1.4.3, 1.4.11). */
+    min: number;
+    pass: boolean;
+}
+/** Every text and focus-ring pairing the components render, checked against WCAG AA. */
+export declare function checkThemeContrast(colors: ThemeColors): ContrastCheck[];

package/dist/lib/theme-seeds.js

@@ -0,0 +1,143 @@
+// A full theme from a few seed colours, plus a contrast check for any palette.
+// Renderer-free: safe in build scripts and for agents generating themes.
+//
+// Seeds are never altered: a brand colour is a brand decision, so when it fails
+// contrast the check reports it instead. Only derived colours (muted text, the text on
+// each filled colour, status colours) are tuned to meet WCAG.
+import { blend, converter, formatHex, parse, wcagContrast } from 'culori';
+import { createThemePreset } from './theme-presets';
+const toOklch = converter('oklch');
+/** WCAG 2.x contrast ratio between two CSS colours, 1–21. */
+function contrastRatio(a, b) {
+    return wcagContrast(a, b);
+}
+function oklch(color) {
+    const parsed = parse(color);
+    if (!parsed)
+        throw new Error(`Not a CSS colour: "${color}"`);
+    return toOklch(parsed);
+}
+const hex = (l, c, h) => formatHex({ mode: 'oklch', l: Math.min(1, Math.max(0, l)), c, h });
+/** Mix `a` toward `b` by `t` in OKLCH lightness and chroma, keeping `a`'s hue. */
+function toward(a, b, t) {
+    const x = oklch(a);
+    const y = oklch(b);
+    return hex(x.l + (y.l - x.l) * t, (x.c ?? 0) + ((y.c ?? 0) - (x.c ?? 0)) * t, x.h ?? y.h ?? 0);
+}
+/** Move `color` away from `against` in lightness until it reaches `min` contrast. */
+function ensureContrast(color, against, min) {
+    const c = oklch(color);
+    const darker = oklch(against).l > 0.5;
+    for (let l = c.l; l >= 0 && l <= 1; l += darker ? -0.01 : 0.01) {
+        const candidate = hex(l, c.c ?? 0, c.h ?? 0);
+        if (contrastRatio(candidate, against) >= min)
+            return candidate;
+    }
+    return darker ? '#000000' : '#ffffff';
+}
+/** Black or white tinted toward the theme, whichever reads better on `fill`. */
+function onFill(fill, seeds) {
+    const light = oklch(seeds.background).l > oklch(seeds.foreground).l ? seeds.background : seeds.foreground;
+    const dark = light === seeds.background ? seeds.foreground : seeds.background;
+    return contrastRatio(light, fill) >= contrastRatio(dark, fill) ? light : dark;
+}
+// Status hues stay recognisable across brands; only their lightness adapts to the page.
+const STATUS_HUES = { destructive: 27, success: 150, warning: 75, info: 240 };
+/** The 25 base colours a theme needs, derived from its seeds. */
+function themeBaseFromSeeds(seeds) {
+    const { background, foreground, primary } = seeds;
+    const dark = oklch(background).l < 0.5;
+    const accent = seeds.accent ?? toward(primary, background, 0.82);
+    const surface = toward(background, foreground, dark ? 0.06 : 0.025);
+    const muted = toward(background, foreground, dark ? 0.1 : 0.06);
+    const status = (hue) => ensureContrast(hex(dark ? 0.72 : 0.55, 0.15, hue), background, 4.5);
+    const destructive = status(STATUS_HUES.destructive);
+    const success = status(STATUS_HUES.success);
+    const warning = status(STATUS_HUES.warning);
+    const info = status(STATUS_HUES.info);
+    const fills = { background, foreground };
+    return {
+        background,
+        foreground,
+        card: surface,
+        cardForeground: foreground,
+        popover: surface,
+        popoverForeground: foreground,
+        primary,
+        primaryForeground: onFill(primary, fills),
+        secondary: muted,
+        secondaryForeground: foreground,
+        accent,
+        accentForeground: onFill(accent, fills),
+        muted,
+        mutedForeground: ensureContrast(toward(foreground, background, 0.42), muted, 4.5),
+        border: toward(background, foreground, dark ? 0.16 : 0.13),
+        input: muted,
+        ring: primary,
+        destructive,
+        destructiveForeground: onFill(destructive, fills),
+        success,
+        successForeground: onFill(success, fills),
+        warning,
+        warningForeground: onFill(warning, fills),
+        info,
+        infoForeground: onFill(info, fills),
+    };
+}
+/**
+ * A complete preset from seeds. `light` is required; `dark` defaults to a dark page with
+ * the same brand colours. `overrides` replaces any base colour before the rest is
+ * derived, so nothing is out of reach; derived tokens can be adjusted on the result.
+ */
+export function themeFromSeeds(input) {
+    const { light } = input;
+    const page = oklch(light.background);
+    const darkPage = hex(0.17, Math.min(page.c ?? 0, 0.02), page.h ?? 0);
+    // Generated, not supplied, so brand colours may be lifted until they read on a dark page.
+    const dark = input.dark ?? {
+        background: darkPage,
+        foreground: hex(0.94, Math.min(page.c ?? 0, 0.015), page.h ?? 0),
+        primary: ensureContrast(light.primary, darkPage, 4.5),
+        accent: light.accent && ensureContrast(light.accent, darkPage, 3),
+    };
+    return createThemePreset({
+        name: input.name,
+        description: input.description,
+        light: { ...themeBaseFromSeeds(light), ...input.overrides?.light },
+        dark: { ...themeBaseFromSeeds(dark), ...input.overrides?.dark },
+        visual: input.visual,
+    });
+}
+const TEXT_PAIRS = [
+    ['foreground', 'background'],
+    ['cardForeground', 'card'],
+    ['popoverForeground', 'popover'],
+    ['mutedForeground', 'background'],
+    ['mutedForeground', 'muted'],
+    ['primaryForeground', 'primary'],
+    ['secondaryForeground', 'secondary'],
+    ['accentForeground', 'accent'],
+    ['destructiveForeground', 'destructive'],
+    ['successForeground', 'success'],
+    ['warningForeground', 'warning'],
+    ['infoForeground', 'info'],
+    ['primary', 'background'],
+    ['destructive', 'background'],
+];
+const UI_PAIRS = [['ring', 'background']];
+/** A translucent colour as it actually renders: blended onto the page. */
+function onPage(color, page) {
+    const parsed = parse(color);
+    if (!parsed || (parsed.alpha ?? 1) >= 1)
+        return color;
+    return formatHex(blend([page, parsed], 'normal'));
+}
+/** Every text and focus-ring pairing the components render, checked against WCAG AA. */
+export function checkThemeContrast(colors) {
+    const check = ([fg, bg], min) => {
+        const background = onPage(colors[bg], colors.background);
+        const ratio = Math.round(contrastRatio(onPage(colors[fg], background), background) * 100) / 100;
+        return { pair: `${fg} on ${bg}`, ratio, min, pass: ratio >= min };
+    };
+    return [...TEXT_PAIRS.map((p) => check(p, 4.5)), ...UI_PAIRS.map((p) => check(p, 3))];
+}

package/dist/metro.cjs

@@ -4,10 +4,11 @@ const { withUniwindConfig } = require('uniwind/metro');
 
 /**
  * Packages that must resolve the real `react-native`. Uniwind's native resolver
- * rewrites every `from 'react-native'` to its component wrapper, which re-exports
- * components and nothing else, so a package importing a non-component export gets
- * `undefined` with no build error. `expo-asset` imports `AssetRegistry` that way, and
- * without it every `@expo/vector-icons` glyph is silently absent on iOS and Android.
+ * rewrites every `from 'react-native'` to its component wrapper. The wrapper re-exports
+ * the components and most of the API, but not all of it, and a missing export arrives
+ * as `undefined` with no build error. `expo-asset` imports `AssetRegistry`, which the
+ * wrapper lacks, and without it every `@expo/vector-icons` glyph is silently absent on
+ * iOS and Android.
  */
 const NEEDS_REAL_REACT_NATIVE = ['expo-asset', 'expo-font', '@expo/vector-icons'];