@rific/auto-paper 0.12.2 → 0.12.4

package/README.md

@@ -34,7 +34,7 @@ npm install expo-blur             # frosted-glass BlurView
 npm install expo-navigation-bar   # (>= 56.0.0, SDK 54+) auto-syncs Android nav bar icon style to the theme when BottomNavigation is mounted
 ```
 
-These integrations are opt-in: pass them to `Provider` (`expoBlur`, `navigationBar`, and `reanimated` — see the prop table below), and the relevant wrappers pick them up automatically. Omit them and you still get working fallbacks: `BlurView` renders its solid (non-blur) look, `BottomNavigation` simply skips nav-bar syncing, and `Dialog` treats `animatedStyle` as a no-op unless a reanimated module is injected.
+These integrations are opt-in: pass them to `Provider` (`expoBlur`, `navigationBar`, and `reanimated` - see the prop table below), and the relevant wrappers pick them up automatically. Omit them and you still get working fallbacks: `BlurView` renders its solid (non-blur) look, `BottomNavigation` simply skips nav-bar syncing, and `Dialog` treats `animatedStyle` as a no-op unless a reanimated module is injected.
 
 The exported Redux slice has no dependency on `@reduxjs/toolkit`: it works with RTK stores, vanilla Redux, or no Redux at all.
 
@@ -221,7 +221,7 @@ export function Theme({ children }: { children: React.ReactNode }) {
 }
 ```
 
-Keep the scope honest: this only replaces the final `<Provider initialValue={...} onChange={...} onReady={...}>` prop list with `<Provider {...bridgeProps}>`. It doesn't do the `useSelector`/`useDispatch` wiring above it — that's still yours to write, since `RootState`'s shape is app-local and this package has no opinion on it (or on state management being Redux at all; `useThemeBridgeProps` takes plain values and callbacks, not a `dispatch` function).
+Keep the scope honest: this only replaces the final `<Provider initialValue={...} onChange={...} onReady={...}>` prop list with `<Provider {...bridgeProps}>`. It doesn't do the `useSelector`/`useDispatch` wiring above it - that's still yours to write, since `RootState`'s shape is app-local and this package has no opinion on it (or on state management being Redux at all; `useThemeBridgeProps` takes plain values and callbacks, not a `dispatch` function).
 
 ### With `useComputedTheme`
 
@@ -266,7 +266,7 @@ export default function App() {
 | `children` | `ReactNode` | |
 | `defaults` | `PaperDefaults` | Prop defaults for wrapper components (see below) |
 | `expoBlur` | `ExpoBlurModule` | Injects `expo-blur` (`import * as ExpoBlur from 'expo-blur'`) so `<BlurView>` renders the real frosted-glass effect. Omit to always render its solid fallback. On Android, expo-blur only blurs when given a `blurTarget` and a `blurMethod` (`'dimezisBlurView'`, or `'dimezisBlurViewSdk31Plus'` on API 31+); without both, `<BlurView>` renders the solid fallback there too, rather than expo-blur's unblurred translucent tint. |
-| `fontFamily` | `string` | Applied to every Paper typography variant (`bodyLarge`, `headlineMedium`, `labelSmall`, ...) via `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight, only fontFamily changes. Omit to keep each platform's system font. |
+| `fontFamily` | `string` | Applied to every Paper typography variant (`bodyLarge`, `headlineMedium`, `labelSmall`, ...) via `configureFonts`'s flat-config mode - each variant keeps its own MD3 fontSize/lineHeight/weight, only fontFamily changes. Omit to keep each platform's system font. |
 | `navigationBar` | `ExpoNavigationBarModule` | Injects `expo-navigation-bar` (`import * as ExpoNavigationBar from 'expo-navigation-bar'`) so the Android nav bar icon style auto-syncs with the theme while a `BottomNavigation` is mounted. Omit (and don't pass `onNavBarChange`) to skip nav bar syncing entirely. |
 | `onNavBarChange` | `(color: string, dark: boolean) => void` | Overrides the built-in nav bar sync: called on Android when the theme changes while a `BottomNavigation` is mounted, instead of the automatic `navigationBar`-driven icon-style sync |
 | `onReady` | `() => void` | Called once when the theme first resolves |
@@ -288,7 +288,7 @@ export default function App() {
 
 ### `useThemeBridgeProps({ initialValue, onChange, onReady })`
 
-Reshapes already-resolved values into the exact `Pick<ProviderProps, 'initialValue' | 'onChange' | 'onReady'>` shape `Provider` expects, memoized on those three fields so the returned object is referentially stable across re-renders until an input actually changes. Meant for a consuming app's own Redux-backed "Theme" component — see "With Redux" above — but takes plain values and callbacks rather than a `dispatch` function or anything Redux-specific, so it works with any state management, or none.
+Reshapes already-resolved values into the exact `Pick<ProviderProps, 'initialValue' | 'onChange' | 'onReady'>` shape `Provider` expects, memoized on those three fields so the returned object is referentially stable across re-renders until an input actually changes. Meant for a consuming app's own Redux-backed "Theme" component - see "With Redux" above - but takes plain values and callbacks rather than a `dispatch` function or anything Redux-specific, so it works with any state management, or none.
 
 It only replaces the final prop list handed to `Provider`; it does not do any `useSelector`/`dispatch` wiring itself, and `onReady` is threaded through unchanged.
 
@@ -378,7 +378,7 @@ function SettingsScreen() {
 
 ### `AutoAppearancePicker`
 
-`AppearancePicker` wired straight to the `Provider`'s own `ThemeSettings` — for the common case where the appearance being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally, so it takes neither `value` nor `onChange`; every other `AppearancePicker` prop still passes through. Reach for the plain `AppearancePicker` instead when it needs to be controlled by something other than the global theme (a local preview before committing, one-off UI unrelated to `Provider`).
+`AppearancePicker` wired straight to the `Provider`'s own `ThemeSettings` - for the common case where the appearance being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally, so it takes neither `value` nor `onChange`; every other `AppearancePicker` prop still passes through. Reach for the plain `AppearancePicker` instead when it needs to be controlled by something other than the global theme (a local preview before committing, one-off UI unrelated to `Provider`).
 
 ```tsx
 import { AutoAppearancePicker } from '@rific/auto-paper'
@@ -390,7 +390,7 @@ function SettingsScreen() {
 
 ### `HarmonyPicker`
 
-Switches between the 6 `ColorHarmony` modes (`triadic`, `split-complementary`, `analogous`, `square`, `complementary`, `double-split`) via `react-native-paper`'s `SegmentedButtons`. `PalettePicker` can embed this same picker in its own dialog instead of standing alone — see `onHarmonyChange` below.
+Switches between the 6 `ColorHarmony` modes (`triadic`, `split-complementary`, `analogous`, `square`, `complementary`, `double-split`) via `react-native-paper`'s `SegmentedButtons`. `PalettePicker` can embed this same picker in its own dialog instead of standing alone - see `onHarmonyChange` below.
 
 ```tsx
 import { HarmonyPicker, useThemeSettings } from '@rific/auto-paper'
@@ -405,7 +405,7 @@ function SettingsScreen() {
 |---|---|---|
 | `value` | `ColorHarmony` | Currently selected harmony |
 | `onChange` | `(harmony: ColorHarmony) => void` | Called when a segment is tapped |
-| `showLabels` | `boolean` | Set `false` for icon-only segments. Also lowers Paper's default 76px-per-segment minimum width down to 0, so all 6 segments can always shrink to fit — however narrow the container, they resize down together instead of overflowing it. `accessibilityLabel` is always set regardless, so screen readers still announce the full harmony name either way. Defaults to `true` |
+| `showLabels` | `boolean` | Set `false` for icon-only segments. Also lowers Paper's default 76px-per-segment minimum width down to 0, so all 6 segments can always shrink to fit - however narrow the container, they resize down together instead of overflowing it. `accessibilityLabel` is always set regardless, so screen readers still announce the full harmony name either way. Defaults to `true` |
 | `checkedColor` / `uncheckedColor` | `string` | Icon color for the checked and unchecked segments, matching Paper's own segmented-button vocabulary |
 | `checkedContainerColor` / `uncheckedContainerColor` | `string` | Fill color for the checked and unchecked segments. Omit any of these four color props to fall back to Paper's default segmented-button styling |
 
@@ -425,6 +425,29 @@ import { Appbar } from '@rific/auto-paper'
 
 `Appbar.Content`, `Appbar.Action`, and `Appbar.BackAction` are re-exported directly from `react-native-paper`. Only `Appbar.Header` is wrapped: it applies `AppbarHeader` defaults from context and renders the synced `StatusBar`.
 
+### `BlurView`
+
+A frosted-glass surface that follows the theme. It blurs when `blur` is true (the default) and `expoBlur` is injected into `Provider` (on Android, only with a `blurTarget` and a `blurMethod`, see the `Provider` table); otherwise it renders a solid `surface` (or `surfaceVariant`) background. `Dialog` and `Menu` use it for their surfaces, passing the ambient `settings.blur`.
+
+```tsx
+import { BlurView, useBlur } from '@rific/auto-paper'
+
+<BlurView blur={useBlur()} elevation={2} style={{ borderRadius: 16, overflow: 'hidden' }}>
+  <Text>Frosted</Text>
+</BlurView>
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `blur` | `boolean` | Whether to blur at all (default `true`). Flipping it while mounted never remounts the children: their state, scroll position and focus survive |
+| `elevation` | `0`-`5` | Tints the surface with `colors.primary` at the MD3 elevation opacity |
+| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'error' \| 'surface' \| 'surfaceVariant'` | Theme-derived tint (or, for `surfaceVariant`, the base surface color) |
+| `tintColor` / `tintOpacity` | `string` / `number` | An explicit tint overlay, overriding `variant` and `elevation` |
+| `intensity`, `blurMethod`, `blurTarget`, `blurReductionFactor` | | Passed to expo-blur's `BlurView`, as in expo-blur |
+| ...all `ViewProps` | | Applied to the outer `View` |
+
+Whether or not it blurs, `BlurView` is always the same outer `View`, holding the blurTint surface layer (at `settings.blurTint`), the tint, and the children. On iOS and Android the blur is an absolutely filled expo-blur layer behind them, the same structure as expo-blur's own native `BlurView`, so (as with expo-blur) rounded corners only clip the blur when the style also sets `overflow: 'hidden'`. On web the outer `View` is itself the CSS `backdrop-filter` element, styled the way expo-blur's web `BlurView` styles its own, so an opacity animated on `BlurView` (as `Dialog` and `Menu` do on web) fades the blur correctly instead of cutting it off.
+
 ### `BottomNavigation`
 
 A thin wrapper around `react-native-paper`'s `BottomNavigation` that keeps the Android system navigation bar icons readable: when `navigationBar` is injected into `Provider`, the icon style automatically follows the theme's darkness (edge-to-edge safe, no background color calls). Pass `onNavBarChange` to the `Provider` to take full control instead; with neither, it silently no-ops.
@@ -514,7 +537,7 @@ import { IconButton } from '@rific/auto-paper'
 
 ### `PalettePicker`
 
-Like `ColorPicker`, but each swatch (and the trigger itself) renders the seed's full triadic palette as a 3-wedge pie instead of a flat color, so you see the whole result before picking. Pass `onHarmonyChange` to fold a compact, icon-only `HarmonyPicker` row into the same dialog, above the swatch grid — every swatch's own pie reshapes live as harmony changes, so there's one place to tune both instead of two separate controls. Omit it and this renders exactly as a plain color-only picker always has.
+Like `ColorPicker`, but each swatch (and the trigger itself) renders the seed's full triadic palette as a 3-wedge pie instead of a flat color, so you see the whole result before picking. Pass `onHarmonyChange` to fold a compact, icon-only `HarmonyPicker` row into the same dialog, above the swatch grid - every swatch's own pie reshapes live as harmony changes, so there's one place to tune both instead of two separate controls. Omit it and this renders exactly as a plain color-only picker always has.
 
 ```tsx
 import { PalettePicker, useThemeSettings } from '@rific/auto-paper'
@@ -537,7 +560,7 @@ function SettingsScreen() {
 
 ### `AutoPalettePicker`
 
-`PalettePicker` wired straight to the `Provider`'s own `ThemeSettings` — both color AND harmony — for the common case where the palette being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally (narrowing `ThemeSettings.color`'s `string | TriadicPalette` down to a plain string via `resolveSeedColor`), so it takes none of `value`/`onChange`/`harmony`/`onHarmonyChange`; `weights`/`colors`/`blur` still pass through. Reach for the plain `PalettePicker` instead when it needs to be controlled by something other than the global theme.
+`PalettePicker` wired straight to the `Provider`'s own `ThemeSettings` - both color AND harmony - for the common case where the palette being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally (narrowing `ThemeSettings.color`'s `string | TriadicPalette` down to a plain string via `resolveSeedColor`), so it takes none of `value`/`onChange`/`harmony`/`onHarmonyChange`; `weights`/`colors`/`blur` still pass through. Reach for the plain `PalettePicker` instead when it needs to be controlled by something other than the global theme.
 
 ```tsx
 import { AutoPalettePicker } from '@rific/auto-paper'

package/dist/index.d.mts

@@ -133,7 +133,7 @@ type BlurViewProps = ExpoBlurViewProps & {
     tintOpacity?: number;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant';
 };
-declare const BlurView: ({ blur, children, elevation, style, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
+declare const BlurView: ({ blur, blurMethod, blurReductionFactor, blurTarget, children, elevation, experimentalBlurMethod, intensity, style, tint: _tint, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
 
 declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
@@ -298,7 +298,7 @@ type ProviderProps = {
     /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
     expoBlur?: ExpoBlurModule;
     /** Applied to every Paper typography variant (bodyLarge, headlineMedium, labelSmall, ...) via
-     * `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight,
+     * `configureFonts`'s flat-config mode - each variant keeps its own MD3 fontSize/lineHeight/weight,
      * only fontFamily changes. The one-line way to reskin an app's whole text to a custom typeface,
      * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
      * to keep each platform's system font (MD3's own default). */

package/dist/index.d.ts

@@ -133,7 +133,7 @@ type BlurViewProps = ExpoBlurViewProps & {
     tintOpacity?: number;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant';
 };
-declare const BlurView: ({ blur, children, elevation, style, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
+declare const BlurView: ({ blur, blurMethod, blurReductionFactor, blurTarget, children, elevation, experimentalBlurMethod, intensity, style, tint: _tint, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
 
 declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
@@ -298,7 +298,7 @@ type ProviderProps = {
     /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
     expoBlur?: ExpoBlurModule;
     /** Applied to every Paper typography variant (bodyLarge, headlineMedium, labelSmall, ...) via
-     * `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight,
+     * `configureFonts`'s flat-config mode - each variant keeps its own MD3 fontSize/lineHeight/weight,
      * only fontFamily changes. The one-line way to reskin an app's whole text to a custom typeface,
      * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
      * to keep each platform's system font (MD3's own default). */

package/dist/index.js

@@ -725,7 +725,12 @@ var blursOnAndroid = ({ blurMethod, blurTarget, experimentalBlurMethod }) => {
 };
 var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
 var VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 };
-var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = "surface", ...props }) => {
+var getWebBlurStyle = (intensity, dark) => {
+  const amount = Math.min(intensity, 100);
+  const filter = `saturate(180%) blur(${amount * 0.2}px)`;
+  return { backdropFilter: filter, backgroundColor: `rgba(${dark ? "25,25,25" : "249,249,249"},${amount / 100 * 0.78})`, WebkitBackdropFilter: filter };
+};
+var BlurView = ({ blur = true, blurMethod, blurReductionFactor, blurTarget, children, elevation, experimentalBlurMethod, intensity, style, tint: _tint, tintColor, tintOpacity, variant = "surface", ...props }) => {
   const { dark, colors } = (0, import_react_native_paper5.useTheme)();
   const { settings } = (0, import_react6.useContext)(ThemeSettingsContext);
   const expoBlur = useBlurModule();
@@ -734,13 +739,13 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
   const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== void 0 ? colors.primary : void 0);
   const resolvedTintOpacity = tintOpacity ?? (tintColor ? dark ? 0.24 : 0.16 : variantColor ? dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light : elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0);
   const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
-  if (blur && expoBlur && (import_react_native4.Platform.OS !== "android" || blursOnAndroid(props)))
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(expoBlur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
-      tint,
-      children
-    ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
+  const blurProps = { blurMethod, blurReductionFactor, blurTarget, experimentalBlurMethod, intensity };
+  const blurs = blur && expoBlur !== void 0 && (import_react_native4.Platform.OS !== "android" || blursOnAndroid(blurProps));
+  const web = import_react_native4.Platform.OS === "web";
+  const containerStyle = !blurs ? [{ backgroundColor: surfaceColor }, style] : web ? [style, getWebBlurStyle(intensity ?? 50, dark)] : style;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { ...props, style: containerStyle, children: [
+    blurs && !web ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(expoBlur.BlurView, { ...blurProps, style: import_react_native4.StyleSheet.absoluteFill, tint: dark ? "dark" : "light" }) : null,
+    blurs ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }) : null,
     tint,
     children
   ] });
@@ -750,6 +755,8 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
+var AnimatedBlurView = import_react_native5.Animated.createAnimatedComponent(BlurView);
+var AnimatedPressable = import_react_native5.Animated.createAnimatedComponent(import_react_native5.Pressable);
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
   const reanimated = useReanimatedModule();
@@ -793,9 +800,16 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
     return child;
   });
   const borderRadius = (isV3 ? 7 : 1) * roundness;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native5.StyleSheet.absoluteFill, { opacity }], testID, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native5.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+  const web = import_react_native5.Platform.OS === "web";
+  const fade = { opacity };
+  const styleOpacity = import_react_native5.StyleSheet.flatten(style)?.opacity;
+  const cardFade = typeof styleOpacity === "number" ? { opacity: import_react_native5.Animated.multiply(opacity, styleOpacity) } : fade;
+  const Backdrop = web ? AnimatedPressable : import_react_native5.Pressable;
+  const Card = web ? AnimatedBlurView : BlurView;
+  const card = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Card, { blur, style: [styles2.card, { borderRadius }, style, web && cardFade], testID: `${testID}-surface`, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native5.StyleSheet.absoluteFill, !web && fade], testID, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Backdrop, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native5.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }, web && fade], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: card }) : card })
   ] }) });
 }
 DialogComponent.Title = import_react_native_paper6.Dialog.Title;
@@ -1036,25 +1050,45 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
 }
 
 // src/components/Menu.tsx
+var import_react11 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_paper15 = require("react-native-paper");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var ANIMATION_DURATION2 = 250;
+var EASING = import_react_native9.Easing.bezier(0.4, 0, 0.2, 1);
+var DEFAULT_ELEVATION = 2;
+var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
+var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
+var AnimatedBlurView2 = import_react_native9.Animated.createAnimatedComponent(BlurView);
+var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
+  const { animation, roundness } = (0, import_react_native_paper15.useTheme)(themeOverrides);
+  const [opacity] = (0, import_react11.useState)(() => new import_react_native9.Animated.Value(0));
+  const [closing, setClosing] = (0, import_react11.useState)(false);
+  if (!visible && !closing) setClosing(true);
+  (0, import_react11.useEffect)(() => {
+    import_react_native9.Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
+  }, [animation.scale, closing, opacity]);
+  const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
+};
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles5.content, props.contentStyle], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlurView, { blur, children }) });
+  const web = import_react_native9.Platform.OS === "web";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles5.content, web && styles5.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
   Item: import_react_native_paper15.Menu.Item
 });
 var styles5 = import_react_native9.StyleSheet.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
+  content: { backgroundColor: "transparent", paddingVertical: 0 },
+  webSurface: { opacity: 1, shadowOpacity: 0 }
 });
 
 // src/components/TextInput.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_native_paper16 = require("react-native-paper");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TextInput = (0, import_react11.forwardRef)(function TextInput2(props, ref) {
+var TextInput = (0, import_react12.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
@@ -1085,10 +1119,10 @@ var import_react_native_paper17 = require("react-native-paper");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
 // src/useThemeBridgeProps.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useThemeBridgeProps(props) {
   const { initialValue, onChange, onReady } = props;
-  return (0, import_react12.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+  return (0, import_react13.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
 }
 
 // src/utils/getThirdColor.ts

package/dist/index.mjs

@@ -416,7 +416,7 @@ import { Icon, TouchableRipple, useTheme as useTheme4 } from "react-native-paper
 
 // src/components/Dialog.tsx
 import React, { useEffect as useEffect3, useState as useState3 } from "react";
-import { Animated, BackHandler, Easing, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Animated, BackHandler, Easing, Platform as Platform2, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Dialog as PaperDialog, Portal as Portal2, useTheme as useTheme3 } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -642,7 +642,12 @@ var blursOnAndroid = ({ blurMethod, blurTarget, experimentalBlurMethod }) => {
 };
 var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
 var VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 };
-var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = "surface", ...props }) => {
+var getWebBlurStyle = (intensity, dark) => {
+  const amount = Math.min(intensity, 100);
+  const filter = `saturate(180%) blur(${amount * 0.2}px)`;
+  return { backdropFilter: filter, backgroundColor: `rgba(${dark ? "25,25,25" : "249,249,249"},${amount / 100 * 0.78})`, WebkitBackdropFilter: filter };
+};
+var BlurView = ({ blur = true, blurMethod, blurReductionFactor, blurTarget, children, elevation, experimentalBlurMethod, intensity, style, tint: _tint, tintColor, tintOpacity, variant = "surface", ...props }) => {
   const { dark, colors } = useTheme2();
   const { settings } = useContext4(ThemeSettingsContext);
   const expoBlur = useBlurModule();
@@ -651,13 +656,13 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
   const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== void 0 ? colors.primary : void 0);
   const resolvedTintOpacity = tintOpacity ?? (tintColor ? dark ? 0.24 : 0.16 : variantColor ? dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light : elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0);
   const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ jsx5(View2, { style: [StyleSheet2.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
-  if (blur && expoBlur && (Platform.OS !== "android" || blursOnAndroid(props)))
-    return /* @__PURE__ */ jsxs3(expoBlur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
-      /* @__PURE__ */ jsx5(View2, { style: [StyleSheet2.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
-      tint,
-      children
-    ] });
-  return /* @__PURE__ */ jsxs3(View2, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
+  const blurProps = { blurMethod, blurReductionFactor, blurTarget, experimentalBlurMethod, intensity };
+  const blurs = blur && expoBlur !== void 0 && (Platform.OS !== "android" || blursOnAndroid(blurProps));
+  const web = Platform.OS === "web";
+  const containerStyle = !blurs ? [{ backgroundColor: surfaceColor }, style] : web ? [style, getWebBlurStyle(intensity ?? 50, dark)] : style;
+  return /* @__PURE__ */ jsxs3(View2, { ...props, style: containerStyle, children: [
+    blurs && !web ? /* @__PURE__ */ jsx5(expoBlur.BlurView, { ...blurProps, style: StyleSheet2.absoluteFill, tint: dark ? "dark" : "light" }) : null,
+    blurs ? /* @__PURE__ */ jsx5(View2, { style: [StyleSheet2.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }) : null,
     tint,
     children
   ] });
@@ -667,6 +672,8 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
+var AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
   const reanimated = useReanimatedModule();
@@ -710,9 +717,16 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
     return child;
   });
   const borderRadius = (isV3 ? 7 : 1) * roundness;
-  return /* @__PURE__ */ jsx6(Portal2, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, { opacity }], testID, children: [
-    /* @__PURE__ */ jsx6(Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ jsx6(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ jsx6(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ jsx6(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ jsx6(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+  const web = Platform2.OS === "web";
+  const fade = { opacity };
+  const styleOpacity = StyleSheet3.flatten(style)?.opacity;
+  const cardFade = typeof styleOpacity === "number" ? { opacity: Animated.multiply(opacity, styleOpacity) } : fade;
+  const Backdrop = web ? AnimatedPressable : Pressable;
+  const Card = web ? AnimatedBlurView : BlurView;
+  const card = /* @__PURE__ */ jsx6(Card, { blur, style: [styles2.card, { borderRadius }, style, web && cardFade], testID: `${testID}-surface`, children: content });
+  return /* @__PURE__ */ jsx6(Portal2, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, !web && fade], testID, children: [
+    /* @__PURE__ */ jsx6(Backdrop, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }, web && fade], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ jsx6(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ jsx6(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: card }) : card })
   ] }) });
 }
 DialogComponent.Title = PaperDialog.Title;
@@ -881,7 +895,7 @@ var AutoPalettePicker = (props) => {
 
 // src/components/BottomNavigation.tsx
 import { useEffect as useEffect4 } from "react";
-import { Platform as Platform2 } from "react-native";
+import { Platform as Platform3 } from "react-native";
 import { BottomNavigation as PaperBottomNavigation, useTheme as useTheme6 } from "react-native-paper";
 
 // src/navigation-bar.ts
@@ -896,7 +910,7 @@ function useNavigationBarSync() {
   const theme = useTheme6();
   const { navigationBar, onNavBarChange } = useNavBarContext();
   useEffect4(() => {
-    if (Platform2.OS !== "android") return;
+    if (Platform3.OS !== "android") return;
     if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
     else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
   }, [theme, onNavBarChange, navigationBar]);
@@ -953,18 +967,38 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
 }
 
 // src/components/Menu.tsx
-import { StyleSheet as StyleSheet6 } from "react-native";
-import { Menu as PaperMenu } from "react-native-paper";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { Animated as Animated2, Easing as Easing2, Platform as Platform4, StyleSheet as StyleSheet6 } from "react-native";
+import { Menu as PaperMenu, useTheme as useTheme9 } from "react-native-paper";
 import { jsx as jsx16 } from "react/jsx-runtime";
+var ANIMATION_DURATION2 = 250;
+var EASING = Easing2.bezier(0.4, 0, 0.2, 1);
+var DEFAULT_ELEVATION = 2;
+var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
+var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
+var AnimatedBlurView2 = Animated2.createAnimatedComponent(BlurView);
+var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
+  const { animation, roundness } = useTheme9(themeOverrides);
+  const [opacity] = useState6(() => new Animated2.Value(0));
+  const [closing, setClosing] = useState6(false);
+  if (!visible && !closing) setClosing(true);
+  useEffect5(() => {
+    Animated2.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
+  }, [animation.scale, closing, opacity]);
+  const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
+  return /* @__PURE__ */ jsx16(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
+};
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
-  return /* @__PURE__ */ jsx16(PaperMenu, { ...props, contentStyle: [styles5.content, props.contentStyle], children: /* @__PURE__ */ jsx16(BlurView, { blur, children }) });
+  const web = Platform4.OS === "web";
+  return /* @__PURE__ */ jsx16(PaperMenu, { ...props, contentStyle: [styles5.content, web && styles5.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ jsx16(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ jsx16(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
   Item: PaperMenu.Item
 });
 var styles5 = StyleSheet6.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
+  content: { backgroundColor: "transparent", paddingVertical: 0 },
+  webSurface: { opacity: 1, shadowOpacity: 0 }
 });
 
 // src/components/TextInput.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",

package/src/ThemeProvider.tsx

@@ -30,7 +30,7 @@ export type ProviderProps = {
   /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
   expoBlur?: ExpoBlurModule
   /** Applied to every Paper typography variant (bodyLarge, headlineMedium, labelSmall, ...) via
-   * `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight,
+   * `configureFonts`'s flat-config mode - each variant keeps its own MD3 fontSize/lineHeight/weight,
    * only fontFamily changes. The one-line way to reskin an app's whole text to a custom typeface,
    * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
    * to keep each platform's system font (MD3's own default). */
@@ -48,7 +48,7 @@ export type ProviderProps = {
 }
 
 // createSettingsContext's generated Provider only exposes `settings` to descendants (via its
-// generated useSettings()) — it can't itself also compute the theme/gate mounting on it being
+// generated useSettings()) - it can't itself also compute the theme/gate mounting on it being
 // ready, since that logic needs `settings` in scope. Provider (below) is just this thin outer
 // wrapper for the settings half; ThemeProviderBody (an actual descendant, reached via
 // useThemeSettingsInternal()) does all the theme-computation/gating work the single combined
@@ -71,7 +71,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigatio
   const { settings } = useThemeSettingsInternal()
 
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
-  // Layered on top of useComputedTheme's own output rather than folded into it — that hook only
+  // Layered on top of useComputedTheme's own output rather than folded into it - that hook only
   // ever recomputes for a color/appearance/harmony change, and fontFamily is a completely
   // independent axis; merging it there would mean either re-running the whole color computation on
   // every fontFamily change (wasteful) or threading fontFamily through as a fourth computeTheme

package/src/components/AutoAppearancePicker.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 // AppearancePicker wired straight to the Provider's own ThemeSettings, for the common case where
 // the appearance being edited IS the whole app's own theme. Takes neither `value` nor `onChange`
-// — reads/writes useThemeSettings() itself, so there's nothing for a consumer to wire up. Reach
+// - reads/writes useThemeSettings() itself, so there's nothing for a consumer to wire up. Reach
 // for the plain AppearancePicker instead when it needs to be controlled by something other than
 // the global theme (a local preview before committing, one-off UI unrelated to Provider).
 export const AutoAppearancePicker = (props: Props) => {

package/src/components/AutoPalettePicker.tsx

@@ -9,9 +9,9 @@ type Props = {
   blur?: boolean
 }
 
-// PalettePicker wired straight to the Provider's own ThemeSettings — both color AND harmony —
+// PalettePicker wired straight to the Provider's own ThemeSettings - both color AND harmony -
 // for the common case where the palette being edited IS the whole app's own theme. Takes none of
-// `value`/`onChange`/`harmony`/`onHarmonyChange` — reads/writes useThemeSettings() itself
+// `value`/`onChange`/`harmony`/`onHarmonyChange` - reads/writes useThemeSettings() itself
 // (resolveSeedColor narrows ThemeSettings.color's `string | TriadicPalette` down to the plain
 // string PalettePicker's own `value` wants). Reach for the plain PalettePicker instead when it
 // needs to be controlled by something other than the global theme.

package/src/components/BlurView.tsx

@@ -58,7 +58,16 @@ export type BlurViewProps = ExpoBlurViewProps & {
   variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant'
 }
 
-export const BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = 'surface', ...props }: BlurViewProps) => {
+// The style expo-blur's web BlurView puts on its View (getBlurStyle in its src/BlurView.web.tsx, with
+// getBackgroundColor's 'dark' and 'light' tints, the only two this component uses): a CSS
+// backdrop-filter plus a translucent tint. On web BlurView applies it to its own View instead.
+const getWebBlurStyle = (intensity: number, dark: boolean) => {
+  const amount = Math.min(intensity, 100)
+  const filter = `saturate(180%) blur(${amount * 0.2}px)`
+  return { backdropFilter: filter, backgroundColor: `rgba(${dark ? '25,25,25' : '249,249,249'},${(amount / 100) * 0.78})`, WebkitBackdropFilter: filter } as ViewStyle
+}
+
+export const BlurView = ({ blur = true, blurMethod, blurReductionFactor, blurTarget, children, elevation, experimentalBlurMethod, intensity, style, tint: _tint, tintColor, tintOpacity, variant = 'surface', ...props }: BlurViewProps) => {
   const { dark, colors } = useTheme()
   const { settings } = useContext(ThemeSettingsContext)
   const expoBlur = useBlurModule()
@@ -67,16 +76,21 @@ export const BlurView = ({ blur = true, children, elevation, style, tintColor, t
   const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== undefined ? colors.primary : undefined)
   const resolvedTintOpacity = tintOpacity ?? (tintColor ? (dark ? 0.24 : 0.16) : variantColor ? (dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light) : elevation !== undefined ? ELEVATION_OPACITY[elevation] : 0)
   const tint = resolvedTintColor && resolvedTintOpacity > 0 ? <View style={[StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }]} /> : null
-  if (blur && expoBlur && (Platform.OS !== 'android' || blursOnAndroid(props)))
-    return (
-      <expoBlur.BlurView {...props} tint={dark ? 'dark' : 'light'} style={style}>
-        <View style={[StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }]} />
-        {tint}
-        {children}
-      </expoBlur.BlurView>
-    )
+  const blurProps = { blurMethod, blurReductionFactor, blurTarget, experimentalBlurMethod, intensity }
+  const blurs = blur && expoBlur !== undefined && (Platform.OS !== 'android' || blursOnAndroid(blurProps))
+  const web = Platform.OS === 'web'
+  // The View holding the children is the same element whether or not blur applies, so flipping
+  // `blur` (a Dialog or Menu following the player's live settings.blur) never remounts them: their
+  // state, scroll offset, focus and ripples all survive. On iOS and Android the blur is an absoluteFill
+  // layer behind everything else, the same structure as expo-blur's own native BlurView. On web it
+  // can't be: Dialog and Menu fade this View's own opacity there, and an ancestor below opacity 1 cuts
+  // a CSS backdrop-filter off from the page behind it, so on web this View itself is the
+  // backdrop-filter element, styled the way expo-blur's web BlurView styles its own.
+  const containerStyle = !blurs ? [{ backgroundColor: surfaceColor }, style] : web ? [style, getWebBlurStyle(intensity ?? 50, dark)] : style
   return (
-    <View {...props} style={[{ backgroundColor: surfaceColor }, style]}>
+    <View {...props} style={containerStyle}>
+      {blurs && !web ? <expoBlur.BlurView {...blurProps} style={StyleSheet.absoluteFill} tint={dark ? 'dark' : 'light'} /> : null}
+      {blurs ? <View style={[StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }]} /> : null}
       {tint}
       {children}
     </View>

package/src/components/Dialog.tsx

@@ -1,5 +1,5 @@
 import React, { type ComponentType, type ReactNode, useEffect, useState } from 'react'
-import { Animated, BackHandler, Easing, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+import { Animated, BackHandler, Easing, Platform, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Dialog as PaperDialog, type DialogActionsProps, type DialogContentProps, type DialogProps as PaperDialogProps, type DialogScrollAreaProps, type DialogTitleProps, Portal, useTheme } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
@@ -7,11 +7,11 @@ import { useBlur } from '../BlurContext'
 import { useReanimatedModule } from '../ThemeProvider'
 import { BlurView } from './BlurView'
 
-// Minimal local mirror of react-native-reanimated's Animated.View — same reasoning as BlurView's
+// Minimal local mirror of react-native-reanimated's Animated.View - same reasoning as BlurView's
 // ExpoBlurModule: Metro doesn't rewrite a require()-in-try/catch call into its module graph inside
 // an ESM build, so the already-imported peer module is injected via <Provider reanimated={...}>
 // (see ThemeProvider.tsx) instead of required directly. Only `View` is needed here. `style: any`,
-// not a real style type — reanimated's actual AnimatedView only accepts its own branded
+// not a real style type - reanimated's actual AnimatedView only accepts its own branded
 // AnimatedStyle shape, which this package never imports (no reanimated dependency at all), so `any`
 // is the only type that both sides (this interface and the real component passed in) can agree on.
 export interface ReanimatedModule {
@@ -23,7 +23,7 @@ export type DialogProps = Omit<PaperDialogProps, 'style'> & {
   blur?: boolean
   style?: StyleProp<ViewStyle>
   // Applied to the card's outer wrapper instead of the card itself, and only takes effect once a
-  // reanimated module has been injected via <Provider reanimated={...}> — otherwise ignored. `style`
+  // reanimated module has been injected via <Provider reanimated={...}> - otherwise ignored. `style`
   // above is a plain object read once per render, so a fast-changing value (e.g. tracking the
   // keyboard height every frame) driven through it needs a full JS re-render per update to paint at
   // all; wiring the same value through `animatedStyle` (e.g. the result of Reanimated's
@@ -39,6 +39,9 @@ const ANIMATION_DURATION = 220
 // Minimum breathing room between the card and the screen edge, clamped up from safe-area insets.
 const DIALOG_MARGIN = 32
 
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = 'dialog' }: DialogProps) {
   const blur = useBlur(blurProp)
   const reanimated = useReanimatedModule()
@@ -93,21 +96,34 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
 
   const borderRadius = (isV3 ? 7 : 1) * roundness
 
+  // On web, an ancestor below opacity 1 cuts the card's CSS backdrop-filter off from the page behind
+  // it, and Chromium doesn't restore the blur once that ancestor fades back up to 1, so fading the
+  // whole layer would leave the open card see-through. There the fade runs on the backdrop and on the
+  // card (the backdrop-filter element) itself instead, off the same value. A numeric opacity in the
+  // card's own style still applies there, multiplied into the fade.
+  const web = Platform.OS === 'web'
+  const fade = { opacity }
+  const styleOpacity = StyleSheet.flatten(style)?.opacity
+  const cardFade = typeof styleOpacity === 'number' ? { opacity: Animated.multiply(opacity, styleOpacity) } : fade
+  const Backdrop = web ? AnimatedPressable : Pressable
+  const Card = web ? AnimatedBlurView : BlurView
+  const card = (
+    <Card blur={blur} style={[styles.card, { borderRadius }, style, web && cardFade]} testID={`${testID}-surface`}>
+      {content}
+    </Card>
+  )
+
   return (
     <Portal>
-      <Animated.View accessibilityLiveRegion='polite' accessibilityViewIsModal pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, { opacity }]} testID={testID}>
-        <Pressable accessibilityLabel='Close modal' accessibilityRole='button' disabled={!dismissable} onPress={dismissable ? onDismiss : undefined} style={[StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }]} testID={`${testID}-backdrop`} />
+      <Animated.View accessibilityLiveRegion='polite' accessibilityViewIsModal pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, !web && fade]} testID={testID}>
+        <Backdrop accessibilityLabel='Close modal' accessibilityRole='button' disabled={!dismissable} onPress={dismissable ? onDismiss : undefined} style={[StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }, web && fade]} testID={`${testID}-backdrop`} />
         <View pointerEvents='box-none' style={[styles.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }]} testID={`${testID}-wrapper`}>
           {reanimated && animatedStyle ? (
             <reanimated.View style={animatedStyle} testID={`${testID}-animated-wrapper`}>
-              <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
-                {content}
-              </BlurView>
+              {card}
             </reanimated.View>
           ) : (
-            <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
-              {content}
-            </BlurView>
+            card
           )}
         </View>
       </Animated.View>

package/src/components/HarmonyPicker.tsx

@@ -13,12 +13,12 @@ const HARMONIES: { label: string; value: ColorHarmony; icon: string }[] = [
 
 // Paper's own SegmentedButtonItem hardcodes `minWidth: 76` per segment (sized for a labeled text
 // button), which 6 of never fit inside PalettePicker's own dialog card (capped at 400, and
-// narrower still once its padding and safe-area margins are subtracted) — they just overflow past
+// narrower still once its padding and safe-area margins are subtracted) - they just overflow past
 // its `overflow: hidden` edge instead of shrinking. A fixed smaller guess (say 44) only moves the
-// breakpoint rather than removing it — 6x44 still exceeds the card's content width on an ordinary
+// breakpoint rather than removing it - 6x44 still exceeds the card's content width on an ordinary
 // ~360-375px phone. Zeroing the floor instead lets each segment's own `flex: 1` divide whatever
 // width IS available with nothing left to enforce a minimum, so 6 of them mathematically can never
-// exceed their container at any screen size — same "shrink to fit, never overflow" contract
+// exceed their container at any screen size - same "shrink to fit, never overflow" contract
 // useSwatchGrid.ts's own SWATCH_GRID_COLUMNS already uses for the swatches below this row. Left
 // untouched in labeled mode, where the wider floor is still doing its job of fitting the text.
 const COMPACT_MIN_WIDTH = 0
@@ -26,13 +26,13 @@ const COMPACT_MIN_WIDTH = 0
 type Props = {
   value: ColorHarmony
   onChange: (harmony: ColorHarmony) => void
-  // Hides text labels, leaving just the icon per segment — mirrors AppearancePicker's own
+  // Hides text labels, leaving just the icon per segment - mirrors AppearancePicker's own
   // showLabels, useful here since there are 6 segments to fit instead of 3.
   // accessibilityLabel is always set regardless, so screen readers still announce the full
   // harmony name either way.
   showLabels?: boolean
   // Per-segment fill, e.g. theme.colors.secondary/onSecondary for the checked segment and
-  // secondaryContainer/onSecondaryContainer for the rest — matches Paper's own checked/
+  // secondaryContainer/onSecondaryContainer for the rest - matches Paper's own checked/
   // unchecked + container color vocabulary. Omit to fall back to Paper's default segmented-
   // button styling.
   checkedColor?: string

package/src/components/Menu.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { StyleSheet } from 'react-native'
-import { Menu as PaperMenu, type MenuItemProps, type MenuProps as PaperMenuProps } from 'react-native-paper'
+import React, { type ReactNode, useEffect, useState } from 'react'
+import { Animated, Easing, Platform, StyleSheet } from 'react-native'
+import { type MD2Theme, type MD3Theme, Menu as PaperMenu, type MenuItemProps, type MenuProps as PaperMenuProps, useTheme } from 'react-native-paper'
 
 import { useBlur } from '../BlurContext'
 import { BlurView } from './BlurView'
@@ -9,11 +9,61 @@ export type MenuProps = PaperMenuProps & {
   blur?: boolean
 }
 
+// Mirror react-native-paper's Menu: its fade (ANIMATION_DURATION * theme.animation.scale, eased with
+// EASING), its default elevation, and the MD3 shadow its Surface draws at each elevation level.
+const ANIMATION_DURATION = 250
+const EASING = Easing.bezier(0.4, 0, 0.2, 1)
+const DEFAULT_ELEVATION = 2
+const SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8]
+const SHADOW_RADIUS = [0, 3, 6, 8, 10, 12]
+
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
+
+type FadingBlurViewProps = {
+  blur: boolean
+  children: ReactNode
+  elevation: number
+  theme: PaperMenuProps['theme']
+  visible: boolean
+}
+
+// Paper fades the menu's Surface in and out. On web, an ancestor below opacity 1 cuts BlurView's CSS
+// backdrop-filter off from the page behind it, and Chromium doesn't restore the blur once the Surface
+// reaches 1, so the open menu stays see-through until something else repaints it. So on web the Surface
+// is pinned at opacity 1 with its shadow hidden, and BlurView itself (the backdrop-filter element) runs
+// Paper's fades and draws that shadow, so the two still fade together.
+const FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }: FadingBlurViewProps) => {
+  const { animation, roundness } = useTheme<MD2Theme | MD3Theme>(themeOverrides)
+  const [opacity] = useState(() => new Animated.Value(0))
+  // Once Paper starts hiding the menu it unmounts this content when that fade-out ends, even if visible
+  // turns back on first, so a close is final here too rather than fading back in only to vanish.
+  const [closing, setClosing] = useState(false)
+  if (!visible && !closing) setClosing(true)
+
+  useEffect(() => {
+    Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start()
+  }, [animation.scale, closing, opacity])
+
+  const shadow = elevation > 0 ? { shadowColor: '#000000', shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null
+  return (
+    <AnimatedBlurView blur={blur} style={[{ borderRadius: roundness, opacity }, shadow]}>
+      {children}
+    </AnimatedBlurView>
+  )
+}
+
 const MenuComponent = ({ blur: blurProp, children, ...props }: MenuProps) => {
   const blur = useBlur(blurProp)
+  const web = Platform.OS === 'web'
   return (
-    <PaperMenu {...props} contentStyle={[styles.content, props.contentStyle]}>
-      <BlurView blur={blur}>{children}</BlurView>
+    <PaperMenu {...props} contentStyle={[styles.content, web && styles.webSurface, props.contentStyle]}>
+      {web ? (
+        <FadingBlurView blur={blur} elevation={props.mode === 'flat' ? 0 : (props.elevation ?? DEFAULT_ELEVATION)} theme={props.theme} visible={props.visible}>
+          {children}
+        </FadingBlurView>
+      ) : (
+        <BlurView blur={blur}>{children}</BlurView>
+      )}
     </PaperMenu>
   )
 }
@@ -23,5 +73,6 @@ export const Menu = Object.assign(MenuComponent, {
 })
 
 const styles = StyleSheet.create({
-  content: { backgroundColor: 'transparent', paddingVertical: 0 }
+  content: { backgroundColor: 'transparent', paddingVertical: 0 },
+  webSurface: { opacity: 1, shadowOpacity: 0 }
 })

package/src/components/PalettePicker.tsx

@@ -58,7 +58,7 @@ type Props = {
   harmony?: ColorHarmony
   // Opt-in: passing this turns on a compact, icon-only HarmonyPicker row inside the dialog, above
   // the swatch grid, so every swatch's own Pie preview reshapes live as harmony changes. Omit it
-  // and this renders exactly as a plain PalettePicker always has — same trigger, same dialog,
+  // and this renders exactly as a plain PalettePicker always has - same trigger, same dialog,
   // harmony fixed at whatever the `harmony` prop says. Gated on the callback itself rather than a
   // separate boolean so there's no way to pass one without the other.
   onHarmonyChange?: (harmony: ColorHarmony) => void

package/src/useComputedTheme.ts

@@ -29,7 +29,7 @@ export type ThemeAppearance = 'system' | 'light' | 'dark'
 // HelperText, Badge) read theme.colors.error/onError directly, so a consumer that wants a
 // getColorRoles-derived "high severity" color without changing what those components render needs
 // its own name. #B00020 already clears WCAG AA for both onDanger-vs-danger (6.16:1) and
-// dangerContainer/onDangerContainer (12–17:1 across modes), verified the same way as warning's
+// dangerContainer/onDangerContainer (12-17:1 across modes), verified the same way as warning's
 // base above.
 export const SEMANTIC_BASE_COLORS = {
   success: '#2E7D32',

package/src/utils/getTonalColor.ts

@@ -1,7 +1,7 @@
 import { getHex } from './getHex'
 import { getRgb } from './getRgb'
 
-// Returns the color with lightness clamped to the given target (0–1), preserving hue and saturation.
+// Returns the color with lightness clamped to the given target (0-1), preserving hue and saturation.
 export const getTonalColor = (color: string, lightness: number): string => {
   const rgb = getRgb(color)
   if (!rgb) return color

package/src/utils/resolveSeedColor.ts

@@ -1,8 +1,8 @@
 import type { TriadicPalette } from './getTriadicPalette'
 
-// ThemeSettings.color is `string | TriadicPalette` — a plain seed hex normally, or an explicit
+// ThemeSettings.color is `string | TriadicPalette` - a plain seed hex normally, or an explicit
 // triad when a consumer bypassed harmony math entirely (see the README's own "Explicit triad"
-// section). Anything that needs a single representative color from it — a picker's own `value`,
-// a card's accent — narrows via this: `.primary` is that triad's own seed, so it's the
+// section). Anything that needs a single representative color from it - a picker's own `value`,
+// a card's accent - narrows via this: `.primary` is that triad's own seed, so it's the
 // representative color on the rare path where this branch is actually hit.
 export const resolveSeedColor = (color: string | TriadicPalette): string => (typeof color === 'string' ? color : color.primary)