direct radix imports, whitelist from eslint

eslint.config.mjs

@@ -205,6 +205,13 @@ export default defineConfig(
             // this is a dep for @atproto/api, but we absolutely need them in sync, so just
             // rely on the transient version
             '@atproto/common-web',
+            // expo is not good enough at tree-shaking to use `radix-ui` directly
+            '@radix-ui/react-dismissable-layer',
+            '@radix-ui/react-focus-guards',
+            '@radix-ui/react-focus-scope',
+            '@radix-ui/react-dropdown-menu',
+            '@radix-ui/react-select',
+            '@radix-ui/react-popover',
           ],
         },
       ],

metro.config.js

@@ -14,10 +14,11 @@ if (cfg.resolver.resolveRequest) {
 // Enforce "no RNGH on web"
 cfg.resolver.blockList = [/react-native-gesture-handler\/.*/]
 
-// Stub out unused Sentry integrations. They're statically imported by
+// Stub out unused packages on web. They're statically imported by libraries we
-// @sentry/browser's barrel, so we can't drop them via blockList; we redirect
+// do use, so we can't drop them via blockList; we redirect the imports to an
-// the imports to an empty module instead. ~185KB of dead weight on web.
+// empty module instead.
 const STUBBED_PACKAGES = new Set([
+  // Sentry integrations we don't use on web (~185KB).
   '@sentry-internal/replay',
   '@sentry-internal/replay-canvas',
   '@sentry-internal/feedback',

src/components/EmojiPicker/index.web.tsx

@@ -1,6 +1,6 @@
 import {createContext, useContext, useEffect, useMemo, useRef} from 'react'
 import EmojiPicker from '@emoji-mart/react'
-import {DropdownMenu} from 'radix-ui'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import {useA11y} from '#/state/a11y'
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'

src/components/Menu/index.web.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
-import {DropdownMenu} from 'radix-ui'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import {useA11y} from '#/state/a11y'
 import {atoms as a, flatten, useTheme, web} from '#/alf'

src/components/Select/index.web.tsx

@@ -1,6 +1,6 @@
 import {createContext, forwardRef, Fragment, useContext, useMemo} from 'react'
 import {View} from 'react-native'
-import {Select as RadixSelect} from 'radix-ui'
+import * as RadixSelect from '@radix-ui/react-select'
 
 import {useA11y} from '#/state/a11y'
 import {atoms as a, flatten, useTheme, web} from '#/alf'

src/components/Tooltip/index.web.tsx

@@ -1,7 +1,7 @@
 import {Children, createContext, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 import {utils} from '@bsky.app/alf'
-import {Popover} from 'radix-ui'
+import * as Popover from '@radix-ui/react-popover'
 
 import {atoms as a, flatten, select, useTheme} from '#/alf'
 import {

src/components/dms/EmojiReactionPicker.web.tsx

@@ -2,7 +2,7 @@ import {useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {type ChatBskyConvoDefs} from '@atproto/api'
 import {useLingui} from '@lingui/react/macro'
-import {DropdownMenu} from 'radix-ui'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import {useSession} from '#/state/session'
 import {atoms as a, flatten, useTheme} from '#/alf'