fix: 2FA setup and /tools/qr-code-generator crash on v5.2.1

v5.2.1 bumped vite ^7.3.1 -> ^8.0.7, which switched the default
bundler from Rollup to Rolldown. Rolldown emits a different __toESM
interop helper for default imports of CJS modules. With isNodeMode=1
(used for default imports), the helper unconditionally writes
synth.default = wholeModule even when the source has its own
`default` export, so:

    import QRCode from 'react-qr-code'

resolves to the whole module object
{ __esModule, default: fn, QRCode: fn } instead of the component, and
<QRCode /> ends up as createElement(<object>, ...) which throws React
#130. The follow-up #418 hydration warning is React's recovery path
remounting the tree.

react-qr-code only ships a CJS entry (no `module:` or `exports:` field
in its package.json), and its CJS entry is interop-CJS shaped:

    Object.defineProperty(exports, '__esModule', { value: true });
    exports.QRCode = X;
    exports.default = X;

Switching to the named import bypasses the broken interop because
Rolldown does not emit __toESM for named CJS imports - the consumer
just gets the module exports namespace and reads .QRCode directly.
The lib's .d.ts only declares the default export, so there's a small
module augmentation in app/types.d.ts to expose the
existing-but-undeclared QRCode named export to TypeScript.

Same fix is needed in web/app/routes/tools.qr-code-generator.tsx,
which has the same import shape and crashes when typing into the
input.

Verified by inspecting the rebuilt user-settings chunk:
- before: jsx(oi.default, { value }) with oi = __toESM(\$qrLib(), 1)
- after:  jsx(oi.QRCode,  { value }) with oi = \$qrLib()

Author: Sturdzza

web/app/pages/UserSettings/components/TwoFA.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import QRCode from 'react-qr-code'
+import { QRCode } from 'react-qr-code'
 import { useFetcher } from 'react-router'
 import { toast } from 'sonner'
 import { LockIcon } from '@phosphor-icons/react'

web/app/routes/tools.qr-code-generator.tsx

@@ -1,6 +1,6 @@
 import { DownloadIcon } from '@phosphor-icons/react'
 import { useState } from 'react'
-import QRCode from 'react-qr-code'
+import { QRCode } from 'react-qr-code'
 import type { MetaFunction } from 'react-router'
 import { redirect } from 'react-router'
 import type { SitemapFunction } from 'remix-sitemap'

web/app/types.d.ts

@@ -0,0 +1,24 @@
+// Module augmentation for `react-qr-code`.
+//
+// The upstream package ships only a default export in its `.d.ts`, but the
+// CJS entry assigns the same component to `exports.QRCode` as well. Vite 8 /
+// Rolldown's `__toESM` helper produces a broken default-interop wrapper for
+// CJS modules whose source already declares `__esModule: true` and its own
+// `default` (the synthetic `.default` ends up pointing at the whole module
+// object instead of the component, so `<QRCode />` renders an object and
+// throws). Importing the existing-but-undeclared `QRCode` named export
+// sidesteps the wrapper.
+declare module 'react-qr-code' {
+  import type { ComponentType, SVGProps, CSSProperties } from 'react'
+
+  export interface QRCodeProps extends SVGProps<SVGSVGElement> {
+    value: string
+    size?: number
+    bgColor?: CSSProperties['backgroundColor']
+    fgColor?: CSSProperties['color']
+    level?: 'L' | 'M' | 'H' | 'Q'
+    title?: string
+  }
+
+  export const QRCode: ComponentType<QRCodeProps>
+}