@rific/auto-paper 0.12.3 → 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
   ] });

package/dist/index.mjs

@@ -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
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.12.3",
+  "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

@@ -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

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/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)