DRAFT- Tutorial: Build a Vault app with Replit and Median.co

Build a mobile-first password vault app named "Vault" with React, Vite, Tailwind CSS, and shadcn/ui.

This web app will later be converted to a mobile app using Median.co to enable Face ID / Touch ID, Copy to Clipboard, Haptic Feedback. The vault will be unlocked using a 4 digit code or Face ID / Touch ID. Do not add Sign up / Sign in, email, social login, or recovery email. 

## On the user's first session
1. Two onboarding pages (no kickers):
   - Title: Your Vault. Body: Securely access your passwords.
   - Title: Simple and secure access. Body: Unlock the vault with your 4-digit code or using Face ID / Touch ID.
2. Enter your code: 4-digit number pad; confirm title "One more time". No Continue button — advance when user enters 4th digit. Code must exist before biometric enrolment.
3. Biometrics page — Enable and Not now only (no Open my vault):
   - Title: Unlock with [Face ID|Touch ID|Biometrics] from biometryType. Body: You can set this up later in the vault settings.
   - Enable: auth.status + auth.save({ secret: code }) then enter the empty vault (no Face ID sheet on save).
   - Not now: enter the empty vault with code-only unlock.
4. Land on an empty vault list. User can enable biometrics later in Settings. Do not ask again.

## Return visits
- Lock screen: If biometrics are enabled, primary button Unlock with [Face ID|Touch ID|Biometrics]; secondary Unlock with code. Do NOT auto-prompt on load.
- Code pad appears after Unlock with code (or biometric failure). Submit on the 4th digit.
- Forgot code → Settings → Reset demo.

## Vault list
- Header: Lock + Settings (gear). No marketing hero.
- Empty state: "Add your first password" CTA only.
- Each row: site, username, masked password, Reveal, Copy.
- Reveal toggles the mask with NO re-auth. Copy uses Median clipboard + haptic + toast, NO re-auth.

## Add / Edit
- Full-page single-column form (no nested card): Domain, username, password, notes (optional, max 200). Confirm before delete.

## Settings
- Enable / disable biometrics (label from biometryType)
- Change code (verify current code, then set a new 4-digit code)
- Theme: System / Light / Dark
- Reset demo: confirm, wipe vault data + biometric secret, go to onboarding page 1

## Browser (not inside Median)
- Top banner: open in the Median app for Face ID, clipboard, and on-device vault.
- Disable native actions. Show three read-only samples: GitHub / [email protected], Wi-Fi / home-network, Bank / ****1234.
- User can still add passwords and copy passwords to clipboard
- Do not fake successful Face ID.

## Median JavaScript Bridge (required)
- Install median-js-bridge and import: import Median from 'median-js-bridge'.
- See official median docs for usage https://docs.median.co/docs/npm-package
- Detect native with Median.isNativeApp() ONLY. Never use the user agent. Poll isNativeApp() (or Median.onReady) up to ~3 seconds before the first native call.
- Fire-and-forget (return undefined): clipboard.set, haptics.trigger. A resolved await is not success.
- Callback-backed (return a promise that never rejects): auth.status, auth.save, auth.get, auth.delete. Timeout them (~5s; ~60s for auth.get).
- Auth status: available if result.hasTouchId === true. Use result.biometryType for labels (faceId / touchId / else Biometrics).
- Auth save: await Median.auth.save({ secret: String }) — no biometric UI.
- Auth get (button tap only): await Median.auth.get({ prompt: 'Unlock Vault', callbackOnCancel: 1 }). Success if result.success && result.secret.
- Auth delete on disable Face ID or Reset demo.
- Clipboard: Median.clipboard.set({ data: passwordString }).
- Haptics: Median.haptics.trigger({ style: 'notificationSuccess' }) on unlock and copy only.
- If the Median shell is present but isNativeApp() never becomes true, show: "Median JavaScript Bridge not detected — enable JavaScript Bridge / NPM in App Studio, then rebuild."