Add to existing

Round line height
Design system tweaks (#2822 )
2024-02-09 11:56:19 -06:00 · 2024-02-09 11:55:13 -06:00 · 2024-02-09 09:52:32 -08:00 · 2024-02-08 22:20:41 -08:00 · 2024-02-08 21:00:50 -08:00 · 2024-02-09 02:20:34 +00:00
416 changed files with 55547 additions and 9982 deletions
@@ -91,8 +91,8 @@ web-build/


 # Android & iOS folders
-android/
-ios/
+/android/
+/ios/

 # environment variables
 .env
@@ -91,8 +91,8 @@ web-build/


 # Android & iOS folders
-android/
-ios/
+/android/
+/ios/

 # environment variables
 .env
@@ -1,4 +1,4 @@
-Copyright 2023 Bluesky PBC
+Copyright 2023–2024 Bluesky PBC

 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

@@ -14,7 +14,8 @@ async function main() {
      await server?.close()
      console.log('Starting new server')
      const inviteRequired = url?.query && 'invite' in url.query
-      server = await createServer({inviteRequired})
+      const phoneRequired = url?.query && 'phone' in url.query
+      server = await createServer({inviteRequired, phoneRequired})
      console.log('Listening at', server.pdsUrl)
      if (url?.query) {
        if ('users' in url.query) {
@@ -16,14 +16,12 @@ describe('Create account', () => {

    await element(by.id('createAccountButton')).tap()
    await device.takeScreenshot('1- opened create account screen')
-    await element(by.id('otherServerBtn')).tap()
+    await element(by.id('selectServiceButton')).tap()
    await device.takeScreenshot('2- selected other server')
-    await element(by.id('customServerInput')).clearText()
-    await element(by.id('customServerInput')).typeText(service)
+    await element(by.id('customServerTextInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
    await device.takeScreenshot('3- input test server URL')
-
-    await element(by.id('nextBtn')).tap()
-
    await element(by.id('emailInput')).typeText('example@test.com')
    await element(by.id('passwordInput')).typeText('hunter2')
    await device.takeScreenshot('4- entered account details')
@@ -31,7 +29,7 @@ describe('Create account', () => {
    await element(by.id('nextBtn')).tap()

    await element(by.id('handleInput')).typeText('e2e-test')
-    await device.takeScreenshot('4- entered handle')
+    await device.takeScreenshot('5- entered handle')

    await element(by.id('nextBtn')).tap()

@@ -1,10 +1,5 @@
 /* eslint-env detox/detox */

-/**
- * This test is being skipped until we can resolve the detox crash issue
- * with the side drawer.
- */
-
 import {describe, beforeAll, it} from '@jest/globals'
 import {expect} from 'detox'
 import {openApp, loginAsAlice, createServer} from '../util'
@@ -31,12 +26,12 @@ describe('invite-codes', () => {
    await element(by.id('e2eOpenLoggedOutView')).tap()
    await element(by.id('createAccountButton')).tap()
    await device.takeScreenshot('1- opened create account screen')
-    await element(by.id('otherServerBtn')).tap()
+    await element(by.id('selectServiceButton')).tap()
    await device.takeScreenshot('2- selected other server')
-    await element(by.id('customServerInput')).clearText()
-    await element(by.id('customServerInput')).typeText(service)
+    await element(by.id('customServerTextInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
    await device.takeScreenshot('3- input test server URL')
-    await element(by.id('nextBtn')).tap()
    await element(by.id('inviteCodeInput')).typeText(inviteCode)
    await element(by.id('emailInput')).typeText('example@test.com')
    await element(by.id('passwordInput')).typeText('hunter2')
@@ -0,0 +1,57 @@
+/* eslint-env detox/detox */
+
+import {describe, beforeAll, it} from '@jest/globals'
+import {expect} from 'detox'
+import {openApp, loginAsAlice, createServer} from '../util'
+
+describe('invite-codes', () => {
+  let service: string
+  let inviteCode = ''
+  beforeAll(async () => {
+    service = await createServer('?users&invite&phone')
+    await openApp({permissions: {notifications: 'YES'}})
+  })
+
+  it('I can fetch invite codes', async () => {
+    await loginAsAlice()
+    await element(by.id('e2eOpenInviteCodesModal')).tap()
+    await expect(element(by.id('inviteCodesModal'))).toBeVisible()
+    const attrs = await element(by.id('inviteCode-0-code')).getAttributes()
+    inviteCode = attrs.text
+    await element(by.id('closeBtn')).tap()
+    await element(by.id('e2eSignOut')).tap()
+  })
+
+  it('I can create a new account with the invite code', async () => {
+    await element(by.id('e2eOpenLoggedOutView')).tap()
+    await element(by.id('createAccountButton')).tap()
+    await device.takeScreenshot('1- opened create account screen')
+    await element(by.id('selectServiceButton')).tap()
+    await device.takeScreenshot('2- selected other server')
+    await element(by.id('customServerTextInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
+    await device.takeScreenshot('3- input test server URL')
+    await element(by.id('inviteCodeInput')).typeText(inviteCode)
+    await element(by.id('emailInput')).typeText('example@test.com')
+    await element(by.id('passwordInput')).typeText('hunter2')
+    await device.takeScreenshot('4- entered account details')
+    await element(by.id('nextBtn')).tap()
+    await element(by.id('phoneInput')).typeText('5558675309')
+    await element(by.id('requestCodeBtn')).tap()
+    await device.takeScreenshot('5- requested code')
+    await element(by.id('codeInput')).typeText('000000')
+    await device.takeScreenshot('6- entered code')
+    await element(by.id('nextBtn')).tap()
+    await element(by.id('handleInput')).typeText('e2e-test')
+    await device.takeScreenshot('7- entered handle')
+    await element(by.id('nextBtn')).tap()
+    await expect(element(by.id('welcomeOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('recommendedFeedsOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('recommendedFollowsOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('homeScreen'))).toBeVisible()
+  })
+})
@@ -0,0 +1,85 @@
+/* eslint-env detox/detox */
+
+import {describe, beforeAll, it} from '@jest/globals'
+import {expect} from 'detox'
+import {openApp, createServer} from '../util'
+
+describe('Create account', () => {
+  let service: string
+  beforeAll(async () => {
+    service = await createServer('?phone')
+    await openApp({permissions: {notifications: 'YES'}})
+  })
+
+  it('I can create a new account with text verification', async () => {
+    await element(by.id('e2eOpenLoggedOutView')).tap()
+
+    await element(by.id('createAccountButton')).tap()
+    await device.takeScreenshot('1- opened create account screen')
+    await element(by.id('selectServiceButton')).tap()
+    await device.takeScreenshot('2- selected other server')
+    await element(by.id('customServerTextInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
+    await device.takeScreenshot('3- input test server URL')
+    await element(by.id('emailInput')).typeText('text-verification@test.com')
+    await element(by.id('passwordInput')).typeText('hunter2')
+    await device.takeScreenshot('4- entered account details')
+    await element(by.id('nextBtn')).tap()
+
+    await element(by.id('phoneInput')).typeText('8042221111')
+    await element(by.id('requestCodeBtn')).tap()
+    await device.takeScreenshot('5- requested code')
+
+    await element(by.id('codeInput')).typeText('000000')
+    await device.takeScreenshot('6- entered code')
+    await element(by.id('nextBtn')).tap()
+
+    await element(by.id('handleInput')).typeText('text-verification-test')
+    await device.takeScreenshot('7- entered handle')
+
+    await element(by.id('nextBtn')).tap()
+
+    await expect(element(by.id('welcomeOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('recommendedFeedsOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('recommendedFollowsOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('homeScreen'))).toBeVisible()
+  })
+
+  it('failed text verification correctly goes back to the code input screen', async () => {
+    await element(by.id('e2eSignOut')).tap()
+    await element(by.id('e2eOpenLoggedOutView')).tap()
+
+    await element(by.id('createAccountButton')).tap()
+    await device.takeScreenshot('1- opened create account screen')
+    await element(by.id('selectServiceButton')).tap()
+    await device.takeScreenshot('2- selected other server')
+    await element(by.id('customServerTextInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
+    await device.takeScreenshot('3- input test server URL')
+    await element(by.id('emailInput')).typeText('text-verification2@test.com')
+    await element(by.id('passwordInput')).typeText('hunter2')
+    await device.takeScreenshot('4- entered account details')
+    await element(by.id('nextBtn')).tap()
+
+    await element(by.id('phoneInput')).typeText('8042221111')
+    await element(by.id('requestCodeBtn')).tap()
+    await device.takeScreenshot('5- requested code')
+
+    await element(by.id('codeInput')).typeText('111111')
+    await device.takeScreenshot('6- entered code')
+    await element(by.id('nextBtn')).tap()
+
+    await element(by.id('handleInput')).typeText('text-verification-test2')
+    await device.takeScreenshot('7- entered handle')
+
+    await element(by.id('nextBtn')).tap()
+
+    await expect(element(by.id('codeInput'))).toBeVisible()
+    await device.takeScreenshot('8- got error')
+  })
+})
@@ -105,7 +105,7 @@ async function openAppForDebugBuild(platform: string, opts: any) {
  await sleep(3000)
 }

-export async function createServer(path = '') {
+export async function createServer(path = ''): Promise<string> {
  return new Promise(function (resolve, reject) {
    var req = http.request(
      {
@@ -455,51 +455,45 @@ describe('parseEmbedPlayerFromUrl', () => {
    'https://tenor.com/notView/gifId',
    'https://tenor.com/view',
    'https://tenor.com/view/gifId.gif',
+    'https://tenor.com/intl/view/gifId.gif',
  ]

  const outputs = [
    {
      type: 'youtube_video',
      source: 'youtube',
-      playerUri:
-        'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
    },
    {
      type: 'youtube_video',
      source: 'youtube',
-      playerUri:
-        'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
    },
    {
      type: 'youtube_video',
      source: 'youtube',
-      playerUri:
-        'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
    },
    {
      type: 'youtube_video',
      source: 'youtube',
-      playerUri:
-        'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
    },
    {
      type: 'youtube_video',
      source: 'youtube',
-      playerUri:
-        'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
    },
    {
      type: 'youtube_short',
      source: 'youtubeShorts',
      hideDetails: true,
-      playerUri:
-        'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
    },
    {
      type: 'youtube_video',
      source: 'youtube',
-      playerUri:
-        'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
    },

    undefined,
@@ -742,6 +736,13 @@ describe('parseEmbedPlayerFromUrl', () => {
      hideDetails: true,
      playerUri: 'https://tenor.com/view/gifId.gif',
    },
+    {
+      type: 'tenor_gif',
+      source: 'tenor',
+      isGif: true,
+      hideDetails: true,
+      playerUri: 'https://tenor.com/intl/view/gifId.gif',
+    },
  ]

  it('correctly grabs the correct id from uri', () => {
@@ -751,8 +752,6 @@ describe('parseEmbedPlayerFromUrl', () => {

      const res = parseEmbedPlayerFromUrl(input)

-      console.log(input)
-
      expect(res).toEqual(output)
    }
  })
@@ -1,5 +1,16 @@
 const pkg = require('./package.json')

+const SPLASH_CONFIG = {
+  backgroundColor: '#ffffff',
+  image: './assets/splash.png',
+  resizeMode: 'cover',
+}
+const DARK_SPLASH_CONFIG = {
+  backgroundColor: '#001429',
+  image: './assets/splash-dark.png',
+  resizeMode: 'cover',
+}
+
 module.exports = function () {
  /**
   * App version number. Should be incremented as part of a release cycle.
@@ -9,12 +20,12 @@ module.exports = function () {
  /**
   * iOS build number. Must be incremented for each TestFlight version.
   */
-  const IOS_BUILD_NUMBER = '1'
+  const IOS_BUILD_NUMBER = '2'

  /**
   * Android build number. Must be incremented for each release.
   */
-  const ANDROID_VERSION_CODE = 54
+  const ANDROID_VERSION_CODE = 61

  /**
   * Uses built-in Expo env vars
@@ -42,11 +53,7 @@ module.exports = function () {
      orientation: 'portrait',
      icon: './assets/icon.png',
      userInterfaceStyle: 'automatic',
-      splash: {
-        image: './assets/splash.png',
-        resizeMode: 'cover',
-        backgroundColor: '#ffffff',
-      },
+      splash: SPLASH_CONFIG,
      ios: {
        buildNumber: IOS_BUILD_NUMBER,
        supportsTablet: false,
@@ -66,6 +73,10 @@ module.exports = function () {
            'Used for profile pictures, posts, and other kinds of content',
        },
        associatedDomains: ['applinks:bsky.app', 'applinks:staging.bsky.app'],
+        splash: {
+          ...SPLASH_CONFIG,
+          dark: DARK_SPLASH_CONFIG,
+        },
      },
      androidStatusBar: {
        barStyle: 'dark-content',
@@ -95,6 +106,10 @@ module.exports = function () {
            category: ['BROWSABLE', 'DEFAULT'],
          },
        ],
+        splash: {
+          ...SPLASH_CONFIG,
+          dark: DARK_SPLASH_CONFIG,
+        },
      },
      web: {
        favicon: './assets/favicon.png',
@@ -127,6 +142,13 @@ module.exports = function () {
            username: 'blueskysocial',
          },
        ],
+        [
+          'expo-notifications',
+          {
+            icon: './assets/icon-android-notification.png',
+            color: '#ffffff',
+          },
+        ],
        './plugins/withAndroidManifestPlugin.js',
      ].filter(Boolean),
      extra: {
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M5 3a1 1 0 0 1 1 1v1.423c.498-.46 1.02-.869 1.58-1.213C8.863 3.423 10.302 3 12.028 3a9 9 0 1 1-8.487 12 1 1 0 0 1 1.885-.667A7 7 0 1 0 12.028 5c-1.37 0-2.444.327-3.402.915-.474.29-.93.652-1.383 1.085H9a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M8 6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0V8.414l-9.793 9.793a1 1 0 0 1-1.414-1.414L15.586 7H9a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a8 8 0 1 0 4.21 14.804 1 1 0 0 1 1.054 1.7A9.958 9.958 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 1.104-.27 2.31-.949 3.243-.716.984-1.849 1.6-3.331 1.465a4.207 4.207 0 0 1-2.93-1.585c-.94 1.21-2.388 1.94-3.985 1.715-2.53-.356-4.04-2.91-3.682-5.458.358-2.547 2.514-4.586 5.044-4.23.905.127 1.68.536 2.286 1.126a1 1 0 0 1 1.964.368l-.515 3.545v.002a2.222 2.222 0 0 0 1.999 2.526c.75.068 1.212-.21 1.533-.65.358-.493.566-1.245.566-2.067a8 8 0 0 0-8-8Zm-.112 5.13c-1.195-.168-2.544.819-2.784 2.529-.24 1.71.784 3.03 1.98 3.198 1.195.168 2.543-.819 2.784-2.529.24-1.71-.784-3.03-1.98-3.198Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Zm1 16V9h14v10H5ZM5 7h14V5H5v2Zm3 10.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM17.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM12 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM9.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM12 17.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M21.59 3.193a1 1 0 0 1 .217 1.397l-11.706 16a1 1 0 0 1-1.429.193l-6.294-5a1 1 0 1 1 1.244-1.566l5.48 4.353 11.09-15.16a1 1 0 0 1 1.398-.217Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M15.707 3.293a1 1 0 0 1 0 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414l-8-8a1 1 0 0 1 0-1.414l8-8a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M8.293 3.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm8-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-4a1 1 0 0 1-1-1Zm1-3a1 1 0 1 0 2 0 1 1 0 0 0-2 0Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12c0-4.09 3.527-7.5 8-7.5s8 3.41 8 7.5c0 1.579-.419 2.056-.708 2.236-.388.241-1.031.286-2.058.153-.33-.043-.652-.096-.991-.152a65.905 65.905 0 0 0-.531-.087c-.52-.081-1.077-.156-1.61-.164-1.065-.016-2.336.245-2.996 1.567-.418.834-.295 1.67-.078 2.314.18.534.47 1.055.683 1.437v.001l.097.175.01.018C7.432 19.407 4 16.033 4 12Zm8-9.5C6.532 2.5 2 6.7 2 12s4.532 9.5 10 9.5c.401 0 .812-.04 1.166-.193.41-.176.761-.517.866-1.028.085-.416-.03-.796-.118-1.029a5.981 5.981 0 0 0-.351-.73l-.12-.215c-.215-.392-.403-.73-.52-1.078-.13-.387-.111-.614-.029-.78.146-.291.404-.473 1.178-.461.385.005.825.06 1.329.14.15.023.308.05.47.077.36.059.742.122 1.105.17 1.021.132 2.325.213 3.373-.439C21.496 15.22 22 13.874 22 12c0-5.3-4.532-9.5-10-9.5Zm3.5 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM9 12.25a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm1.5-2.75a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.343 6.343a8 8 0 1 1 11.314 11.314A8 8 0 0 1 6.343 6.343ZM19.071 4.93c-3.905-3.905-10.237-3.905-14.142 0-3.905 3.905-3.905 10.237 0 14.142 3.905 3.905 10.237 3.905 14.142 0 3.905-3.905 3.905-10.237 0-14.142Zm-3.537 9.535a5 5 0 0 0-7.07 0 1 1 0 1 0 1.413 1.415 3 3 0 0 1 4.243 0 1 1 0 0 0 1.414-1.415ZM16 9.5c0 .828-.56 1.5-1.25 1.5s-1.25-.672-1.25-1.5.56-1.5 1.25-1.5S16 8.672 16 9.5ZM9.25 11c.69 0 1.25-.672 1.25-1.5S9.94 8 9.25 8 8 8.672 8 9.5 8.56 11 9.25 11Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2.293 2.293a1 1 0 0 1 1.414 0L7.335 5.92l.03.03 3.22 3.222 4.243 4.242 3.22 3.22.03.03 3.63 3.629a1 1 0 0 1-1.415 1.414l-3.09-3.09c-2.65 1.478-5.625 1.778-8.421.869-3.039-.987-5.779-3.37-7.67-7.027a1 1 0 0 1 0-.918c1.086-2.1 2.452-3.78 3.996-5.019L2.293 3.707a1 1 0 0 1 0-1.414Zm4.24 5.654 2.021 2.021a4 4 0 0 0 5.478 5.478l1.688 1.688c-2.042.982-4.246 1.124-6.32.45-2.34-.76-4.594-2.586-6.265-5.584.97-1.739 2.135-3.083 3.398-4.053Zm3.535 3.535 2.45 2.45a2 2 0 0 1-2.45-2.45Zm.81-5.405c3.573-.49 7.45 1.369 9.987 5.923a14.797 14.797 0 0 1-1.347 2.02 1 1 0 1 0 1.564 1.247 17.078 17.078 0 0 0 1.806-2.808 1 1 0 0 0 0-.918c-2.833-5.479-7.584-8.088-12.281-7.446a1 1 0 0 0 .271 1.982Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7.002 5a1 1 0 0 0-2 0v11.587l-1.295-1.294a1 1 0 0 0-1.414 1.414l3.002 3a1 1 0 0 0 1.414 0l2.998-3a1 1 0 0 0-1.414-1.414l-1.291 1.292V5ZM16 16a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-4Zm-3-4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1Zm-1-6a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.062 11h2.961c.103-2.204.545-4.218 1.235-5.77.06-.136.123-.269.188-.399A8.007 8.007 0 0 0 4.062 11ZM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 2c-.227 0-.518.1-.868.432-.354.337-.719.872-1.047 1.61-.561 1.263-.958 2.991-1.06 4.958h5.95c-.102-1.967-.499-3.695-1.06-4.958-.328-.738-.693-1.273-1.047-1.61C12.518 4.099 12.227 4 12 4Zm4.977 7c-.103-2.204-.545-4.218-1.235-5.77a9.78 9.78 0 0 0-.188-.399A8.006 8.006 0 0 1 19.938 11h-2.961Zm-2.003 2H9.026c.101 1.966.498 3.695 1.06 4.958.327.738.692 1.273 1.046 1.61.35.333.641.432.868.432.227 0 .518-.1.868-.432.354-.337.719-.872 1.047-1.61.561-1.263.958-2.991 1.06-4.958Zm.58 6.169c.065-.13.128-.263.188-.399.69-1.552 1.132-3.566 1.235-5.77h2.961a8.006 8.006 0 0 1-4.384 6.169Zm-7.108 0a9.877 9.877 0 0 1-.188-.399c-.69-1.552-1.132-3.566-1.235-5.77H4.062a8.006 8.006 0 0 0 4.384 6.169Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h1a8.003 8.003 0 0 1 7.75 6.006A7.985 7.985 0 0 1 19 6h1a1 1 0 0 1 1 1v1a8 8 0 0 1-8 8v4a1 1 0 1 1-2 0v-7a8 8 0 0 1-8-8V4Zm2 1a6 6 0 0 1 6 6 6 6 0 0 1-6-6Zm8 9a6 6 0 0 1 6-6 6 6 0 0 1-6 6Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9.124 3.008a1 1 0 0 1 .868 1.116L9.632 7h5.985l.39-3.124a1 1 0 0 1 1.985.248L17.632 7H20a1 1 0 1 1 0 2h-2.617l-.75 6H20a1 1 0 1 1 0 2h-3.617l-.39 3.124a1 1 0 1 1-1.985-.248l.36-2.876H8.382l-.39 3.124a1 1 0 1 1-1.985-.248L6.368 17H4a1 1 0 1 1 0-2h2.617l.75-6H4a1 1 0 1 1 0-2h3.617l.39-3.124a1 1 0 0 1 1.117-.868ZM9.383 9l-.75 6h5.984l.75-6H9.383Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm1 4a1 1 0 0 0 0 2h5a1 1 0 0 0 0-2H4Zm-1 7a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm9-8a4 4 0 1 1 7.446 2.032l.99.989a1 1 0 1 1-1.415 1.414l-.99-.989A4 4 0 0 1 12 12Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 5a1 1 0 0 0 0 2h16a1 1 0 1 0 0-2H4Zm0 12a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2H4Zm-1-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm14-3a1 1 0 0 1 .92.606l1.342 3.132 3.132 1.343a1 1 0 0 1 0 1.838l-3.132 1.343-1.343 3.132a1 1 0 0 1-1.838 0l-1.343-3.132-3.132-1.343a1 1 0 0 1 0-1.838l3.132-1.343 1.343-3.132A1 1 0 0 1 17 9Zm0 3.539-.58 1.355a1 1 0 0 1-.526.525L14.539 15l1.355.58a1 1 0 0 1 .525.526L17 17.461l.58-1.355a1 1 0 0 1 .526-.525L19.461 15l-1.355-.58a1 1 0 0 1-.525-.526L17 12.539Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 5a7 7 0 0 0-5.218 11.666A1 1 0 0 1 5.292 18a9 9 0 1 1 13.416 0 1 1 0 1 1-1.49-1.334A7 7 0 0 0 12 5Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M1 5a1 1 0 0 1 1-1h7a3.99 3.99 0 0 1 3 1.354A3.99 3.99 0 0 1 15 4h7a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-6.723c-.52 0-1 .125-1.4.372-.421.26-.761.633-.983 1.075a1 1 0 0 1-1.788 0 2.664 2.664 0 0 0-.983-1.075c-.4-.247-.88-.372-1.4-.372H2a1 1 0 0 1-1-1V5Zm10 3a2 2 0 0 0-2-2H3v12h5.723c.776 0 1.564.173 2.277.569V8Zm2 10.569V8a2 2 0 0 1 2-2h6v12h-5.723c-.776 0-1.564.173-2.277.569Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 3a1 1 0 0 1 1 1v7h7a1 1 0 1 1 0 2h-7v7a1 1 0 1 1-2 0v-7H4a1 1 0 1 1 0-2h7V4a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="m18.192 5.004 1.864 5.31a1 1 0 0 0 1.887-.662L20.08 4.34c-.665-1.893-3.378-1.741-3.834.207l-3.381 14.449-2.985-9.605C9.3 7.531 6.684 7.506 6.07 9.355l-1.18 3.56-.969-2.312a1 1 0 0 0-1.844.772l.97 2.315c.715 1.71 3.159 1.613 3.741-.144l1.18-3.56 2.985 9.605c.607 1.952 3.392 1.848 3.857-.138l3.381-14.449Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1,57 @@
+package main
+
+import (
+	"fmt"
+	"slices"
+	"strings"
+
+	appbsky "github.com/bluesky-social/indigo/api/bsky"
+)
+
+// Function to expand shortened links in rich text back to full urls, replacing shortened urls in social card meta tags and the noscript output.
+//
+// This essentially reverses the effect of the typescript function `shortenLinks()` in `src/lib/strings/rich-text-manip.ts`
+func ExpandPostText(post *appbsky.FeedPost) string {
+	postText := post.Text
+	var charsAdded int = 0
+	// iterate over facets, check if they're link facets, and if found, grab the uri
+	for _, facet := range post.Facets {
+		linkUri := ""
+		if slices.ContainsFunc(facet.Features, func(feat *appbsky.RichtextFacet_Features_Elem) bool {
+			if feat.RichtextFacet_Link == nil || feat.RichtextFacet_Link.LexiconTypeID != "app.bsky.richtext.facet#link" {
+				return false
+			}
+
+			// bail out if bounds checks fail
+			if int(facet.Index.ByteStart)+charsAdded > len(postText) || int(facet.Index.ByteEnd)+charsAdded > len(postText) {
+				return false
+			}
+			linkText := postText[int(facet.Index.ByteStart)+charsAdded : int(facet.Index.ByteEnd)+charsAdded]
+			linkUri = feat.RichtextFacet_Link.Uri
+
+			// only expand uris that have been shortened (as opposed to those with non-uri anchor text)
+			if strings.HasSuffix(linkText, "...") && strings.Contains(linkUri, linkText[0:len(linkText)-3]) {
+				return true
+			}
+			return false
+		}) {
+			// replace the shortened uri with the full length one from the facet using utf8 byte offsets
+			// NOTE: we already did bounds check above
+			postText = postText[0:int(facet.Index.ByteStart)+charsAdded] + linkUri + postText[int(facet.Index.ByteEnd)+charsAdded:]
+			charsAdded += len(linkUri) - int(facet.Index.ByteEnd-facet.Index.ByteStart)
+		}
+	}
+	// if the post has an embeded link and its url doesn't already appear in postText, append it to
+	// the end to avoid social cards with missing links
+	if post.Embed != nil && post.Embed.EmbedExternal != nil && post.Embed.EmbedExternal.External != nil {
+		externalURI := post.Embed.EmbedExternal.External.Uri
+		if !strings.Contains(postText, externalURI) {
+			postText = fmt.Sprintf("%s\n%s", postText, externalURI)
+		}
+	}
+	// TODO: could embed the actual post text?
+	if post.Embed != nil && (post.Embed.EmbedRecord != nil || post.Embed.EmbedRecordWithMedia != nil) {
+		postText = fmt.Sprintf("%s\n\n[contains quote post or other embedded content]", postText)
+	}
+	return postText
+}
@@ -0,0 +1,39 @@
+package main
+
+import (
+	"encoding/json"
+	"io"
+	"os"
+	"strings"
+	"testing"
+
+	appbsky "github.com/bluesky-social/indigo/api/bsky"
+)
+
+func loadPost(t *testing.T, p string) appbsky.FeedPost {
+
+	f, err := os.Open(p)
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer func() { _ = f.Close() }()
+
+	postBytes, err := io.ReadAll(f)
+	if err != nil {
+		t.Fatal(err)
+	}
+	var post appbsky.FeedPost
+	if err := json.Unmarshal(postBytes, &post); err != nil {
+		t.Fatal(err)
+	}
+	return post
+}
+
+func TestExpandPostText(t *testing.T) {
+	post := loadPost(t, "testdata/atproto_embed_post.json")
+
+	text := ExpandPostText(&post)
+	if !strings.Contains(text, "https://github.com/snarfed/bridgy-fed") {
+		t.Fail()
+	}
+}
@@ -80,7 +80,7 @@ func (srv *Server) WebProfileRSS(c echo.Context) error {
 		}
 	}

-	af, err := appbsky.FeedGetAuthorFeed(ctx, srv.xrpcc, did.String(), "", "", 30)
+	af, err := appbsky.FeedGetAuthorFeed(ctx, srv.xrpcc, did.String(), "", "posts_no_replies", 30)
 	if err != nil {
 		log.Warn("failed to fetch author feed", "did", did, "err", err)
 		return err
@@ -96,7 +96,10 @@ func (srv *Server) WebProfileRSS(c echo.Context) error {
 		if err != nil {
 			return err
 		}
-		rec := p.Post.Record.Val.(*appbsky.FeedPost)
+		rec, ok := p.Post.Record.Val.(*appbsky.FeedPost)
+		if !ok {
+			continue
+		}
 		// only top-level posts in RSS (no replies)
 		if rec.Reply != nil {
 			continue
@@ -108,7 +111,7 @@ func (srv *Server) WebProfileRSS(c echo.Context) error {
 		}
 		posts = append(posts, Item{
 			Link:        fmt.Sprintf("https://%s/profile/%s/post/%s", req.Host, pv.Handle, aturi.RecordKey().String()),
-			Description: rec.Text,
+			Description: ExpandPostText(rec),
 			PubDate:     pubDate,
 			GUID: ItemGUID{
 				Value:   aturi.String(),
@@ -159,6 +159,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/security.txt", func(c echo.Context) error {
 		return c.Redirect(http.StatusMovedPermanently, "/.well-known/security.txt")
 	})
+	e.GET("/iframe/youtube.html", echo.WrapHandler(staticHandler))
 	e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", staticHandler)), func(next echo.HandlerFunc) echo.HandlerFunc {
 		return func(c echo.Context) error {
 			path := c.Request().URL.Path
@@ -203,20 +204,20 @@ func serve(cctx *cli.Context) error {
 	e.GET("/support/copyright", server.WebGeneric)

 	// profile endpoints; only first populates info
-	e.GET("/profile/:handle", server.WebProfile)
-	e.GET("/profile/:handle/follows", server.WebGeneric)
-	e.GET("/profile/:handle/followers", server.WebGeneric)
-	e.GET("/profile/:handle/lists/:rkey", server.WebGeneric)
-	e.GET("/profile/:handle/feed/:rkey", server.WebGeneric)
-	e.GET("/profile/:handle/feed/:rkey/liked-by", server.WebGeneric)
+	e.GET("/profile/:handleOrDID", server.WebProfile)
+	e.GET("/profile/:handleOrDID/follows", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/followers", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/lists/:rkey", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/feed/:rkey", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/feed/:rkey/liked-by", server.WebGeneric)

 	// profile RSS feed (DID not handle)
 	e.GET("/profile/:ident/rss", server.WebProfileRSS)

 	// post endpoints; only first populates info
-	e.GET("/profile/:handle/post/:rkey", server.WebPost)
-	e.GET("/profile/:handle/post/:rkey/liked-by", server.WebGeneric)
-	e.GET("/profile/:handle/post/:rkey/reposted-by", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/post/:rkey", server.WebPost)
+	e.GET("/profile/:handleOrDID/post/:rkey/liked-by", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/post/:rkey/reposted-by", server.WebGeneric)

 	// Mailmodo
 	e.POST("/api/waitlist", server.apiWaitlist)
@@ -299,17 +300,18 @@ func (srv *Server) WebPost(c echo.Context) error {
 	if err != nil {
 		return c.Render(http.StatusOK, "post.html", data)
 	}
-	handleParam := c.Param("handle")
-	handle, err := syntax.ParseHandle(handleParam)
+	handleOrDIDParam := c.Param("handleOrDID")
+	handleOrDID, err := syntax.ParseAtIdentifier(handleOrDIDParam)
 	if err != nil {
 		return c.Render(http.StatusOK, "post.html", data)
 	}
-	handle = handle.Normalize()
+
+	identifier := handleOrDID.Normalize().String()

 	// requires two fetches: first fetch profile (!)
-	pv, err := appbsky.ActorGetProfile(ctx, srv.xrpcc, handle.String())
+	pv, err := appbsky.ActorGetProfile(ctx, srv.xrpcc, identifier)
 	if err != nil {
-		log.Warnf("failed to fetch handle: %s\t%v", handle, err)
+		log.Warnf("failed to fetch profile for: %s\t%v", identifier, err)
 		return c.Render(http.StatusOK, "post.html", data)
 	}
 	unauthedViewingOkay := true
@@ -336,13 +338,29 @@ func (srv *Server) WebPost(c echo.Context) error {
 	postView := tpv.Thread.FeedDefs_ThreadViewPost.Post
 	data["postView"] = postView
 	data["requestURI"] = fmt.Sprintf("https://%s%s", req.Host, req.URL.Path)
-	if postView.Embed != nil && postView.Embed.EmbedImages_View != nil {
-		var thumbUrls []string
-		for i := range postView.Embed.EmbedImages_View.Images {
-			thumbUrls = append(thumbUrls, postView.Embed.EmbedImages_View.Images[i].Thumb)
+	if postView.Embed != nil {
+		if postView.Embed.EmbedImages_View != nil {
+			var thumbUrls []string
+			for i := range postView.Embed.EmbedImages_View.Images {
+				thumbUrls = append(thumbUrls, postView.Embed.EmbedImages_View.Images[i].Thumb)
+			}
+			data["imgThumbUrls"] = thumbUrls
+		} else if postView.Embed.EmbedRecordWithMedia_View != nil && postView.Embed.EmbedRecordWithMedia_View.Media != nil && postView.Embed.EmbedRecordWithMedia_View.Media.EmbedImages_View != nil {
+			var thumbUrls []string
+			for i := range postView.Embed.EmbedRecordWithMedia_View.Media.EmbedImages_View.Images {
+				thumbUrls = append(thumbUrls, postView.Embed.EmbedRecordWithMedia_View.Media.EmbedImages_View.Images[i].Thumb)
+			}
+			data["imgThumbUrls"] = thumbUrls
 		}
-		data["imgThumbUrls"] = thumbUrls
 	}
+
+	if postView.Record != nil {
+		postRecord, ok := postView.Record.Val.(*appbsky.FeedPost)
+		if ok {
+			data["postText"] = ExpandPostText(postRecord)
+		}
+	}
+
 	return c.Render(http.StatusOK, "post.html", data)
 }

@@ -351,16 +369,16 @@ func (srv *Server) WebProfile(c echo.Context) error {
 	data := pongo2.Context{}

 	// sanity check arguments. don't 4xx, just let app handle if not expected format
-	handleParam := c.Param("handle")
-	handle, err := syntax.ParseHandle(handleParam)
+	handleOrDIDParam := c.Param("handleOrDID")
+	handleOrDID, err := syntax.ParseAtIdentifier(handleOrDIDParam)
 	if err != nil {
 		return c.Render(http.StatusOK, "profile.html", data)
 	}
-	handle = handle.Normalize()
+	identifier := handleOrDID.Normalize().String()

-	pv, err := appbsky.ActorGetProfile(ctx, srv.xrpcc, handle.String())
+	pv, err := appbsky.ActorGetProfile(ctx, srv.xrpcc, identifier)
 	if err != nil {
-		log.Warnf("failed to fetch handle: %s\t%v", handle, err)
+		log.Warnf("failed to fetch profile for: %s\t%v", identifier, err)
 		return c.Render(http.StatusOK, "profile.html", data)
 	}
 	unauthedViewingOkay := true
@@ -0,0 +1,60 @@
+{
+    "$type": "app.bsky.feed.post",
+    "createdAt": "2023-12-04T19:30:03.024Z",
+    "embed": {
+        "$type": "app.bsky.embed.external",
+        "external": {
+        "description": "🕸 Bridges the IndieWeb to Mastodon and the fediverse via ActivityPub. - GitHub - snarfed/bridgy-fed: 🕸 Bridges the IndieWeb to Mastodon and the fediverse via ActivityPub.",
+        "thumb": {
+            "$type": "blob",
+            "ref": {
+            "$link": "bafkreidplhjcnrl2c74r3xs7nh7k7q3ny6ul7cgxr2fophblvdeky6t64e"
+            },
+            "mimeType": "image/jpeg",
+            "size": 347998
+        },
+        "title": "GitHub - snarfed/bridgy-fed: 🕸 Bridges the IndieWeb to Mastodon and the fediverse via ActivityPub...",
+        "uri": "https://github.com/snarfed/bridgy-fed"
+        }
+    },
+    "facets": [
+        {
+        "features": [
+            {
+            "$type": "app.bsky.richtext.facet#link",
+            "uri": "https://github.com/snarfed/bridgy-fed"
+            }
+        ],
+        "index": {
+            "byteEnd": 92,
+            "byteStart": 66
+        }
+        },
+        {
+        "features": [
+            {
+            "$type": "app.bsky.richtext.facet#mention",
+            "did": "did:plc:fdme4gb7mu7zrie7peay7tst"
+            }
+        ],
+        "index": {
+            "byteEnd": 149,
+            "byteStart": 137
+        }
+        }
+    ],
+    "langs": [
+        "en"
+    ],
+    "reply": {
+        "parent": {
+        "cid": "bafyreifaidyl62p4snkdwsygviemsxyidi3cd7dxvjomh5644sovxhsppa",
+        "uri": "at://did:plc:ewvi7nxzyoun6zhxrhs64oiz/app.bsky.feed.post/3kfqklhpalh2c"
+        },
+        "root": {
+        "cid": "bafyreibiimdwmsp5mqpm7utqcdmvo6fdqmofblp5obs3h7ub6652zyooci",
+        "uri": "at://did:plc:ewvi7nxzyoun6zhxrhs64oiz/app.bsky.feed.post/3kfqkkjdkic2e"
+        }
+    },
+    "text": "Bridgy Fed is an open-source project — check out the code here: github.com/snarfed/brid...\n\nStay updated with the project by following @snarfed.org!"
+}
@@ -0,0 +1,49 @@
+<!DOCTYPE html><meta name="viewport" content="width=device-width, initial-scale=1" />
+<style>
+    body {
+        margin: 0;
+    }
+    .container {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%;
+    }
+    .video {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+</style>
+<div class="container"><div class="video" id="player"></div></div>
+<script>
+  const url = new URL(window.location)
+  const viewport = document.querySelector("meta[name=viewport]")
+
+  const tag = document.createElement("script")
+  tag.src = "https://www.youtube.com/iframe_api"
+  const firstScriptTag = document.getElementsByTagName('script')[0];
+  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+  let player
+  function onYouTubeIframeAPIReady() {
+    player = new YT.Player('player', {
+      width: "1000",
+      height: "1000",
+      videoId: url.searchParams.get('videoId'),
+      playerVars: {
+        autoplay: 1,
+        start: url.searchParams.get('start'),
+        rel: 0,
+        loop: 0,
+        playsinline: 1,
+        origin: url.origin
+      },
+    });
+  }
+  function onPlayerReady(event) {
+    event.target.playVideo();
+  }
+</script>
@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M390 4706 c-136 -38 -201 -106 -247 -261 -25 -85 -24 -350 1 -645 2
+-19 7 -71 10 -115 4 -44 9 -96 11 -115 2 -19 6 -71 10 -115 6 -84 23 -243 30
+-285 2 -14 6 -52 10 -85 6 -53 13 -98 29 -171 11 -54 63 -166 111 -240 108
+-167 281 -302 470 -369 28 -9 59 -21 70 -26 30 -13 181 -46 250 -55 33 -4 113
+-8 177 -8 64 -1 114 -4 110 -7 -6 -4 -65 -17 -197 -43 -11 -2 -47 -11 -80 -21
+-33 -9 -73 -20 -90 -24 -50 -14 -180 -68 -245 -103 -91 -49 -173 -119 -219
+-188 -50 -75 -61 -112 -68 -217 -12 -180 93 -411 310 -681 222 -277 442 -450
+663 -524 88 -29 233 -31 309 -4 180 64 333 229 473 511 77 155 189 454 247
+664 19 67 29 76 39 34 9 -39 27 -100 91 -317 148 -494 305 -754 516 -850 74
+-34 109 -40 219 -39 108 1 202 27 325 91 92 48 267 161 295 192 3 3 25 21 50
+41 52 42 151 143 205 209 20 25 44 54 53 65 28 33 122 179 122 189 0 5 6 17
+14 25 8 9 28 57 46 106 108 309 -13 558 -355 727 -130 65 -292 118 -435 144
+-73 14 -54 19 68 20 254 1 468 53 660 160 241 135 421 396 447 649 4 38 8 72
+10 75 2 5 5 28 20 168 3 23 7 61 10 85 2 23 7 74 11 112 3 39 7 86 9 105 2 19
+7 76 10 125 4 50 8 106 10 125 20 204 26 480 13 558 -26 153 -80 247 -168 292
+-203 104 -452 40 -817 -209 -131 -90 -162 -114 -248 -186 -319 -270 -683 -685
+-967 -1105 -91 -134 -218 -344 -218 -360 0 -23 -18 -7 -39 36 -27 58 -135 231
+-210 339 -64 93 -211 295 -226 311 -5 6 -21 26 -35 44 -14 18 -30 38 -35 44
+-6 6 -39 46 -74 90 -124 152 -370 410 -511 536 -19 17 -44 39 -55 49 -218 194
+-582 408 -762 446 -57 13 -189 13 -233 1z"/>
+</g>
+</svg>
@@ -1,13 +1,13 @@
-<!DOCTYPE html>                                                                                          
-<html lang="en">
-<head>   
+<!DOCTYPE html>
+<html>
+<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover">
  <meta name="referrer" content="origin-when-cross-origin">
  <title>{%- block head_title -%}Bluesky{%- endblock -%}</title>

  <!-- Hello Humans! API docs at https://atproto.com -->
-  
+
  <style>
    /**
     * Extend the react-native-web reset:
@@ -33,36 +33,64 @@
    }

    html {
-      scroll-behavior: smooth;
      /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
      -webkit-text-size-adjust: 100%;
      height: calc(100% + env(safe-area-inset-top));
+      scrollbar-gutter: stable both-edges;
    }

    /* Color theming */
+    /* Default will always be white */
    :root {
-      --text: black;
-      --background: white;
-      --backgroundLight: #F3F3F8;
-    }
-    html.colorMode--dark {
-      --text: white;
-      --background: black;
-      --backgroundLight: #26272D;
-    }
-    @media (prefers-color-scheme: light) {
-      html.colorMode--system {
        --text: black;
        --background: white;
-        --backgroundLight: #F3F3F8;
-      }
+        --backgroundLight: hsl(211, 20%, 95%);
    }
+    /* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
    @media (prefers-color-scheme: dark) {
-      html.colorMode--system {
+        :root {
+            --text: white;
+            --background: black;
+            --backgroundLight: hsl(211, 20%, 20%);
+            color-scheme: dark;
+        }
+    }
+
+    /* Overwrite those preferences with the selected theme */
+    html.theme--light {
+        --text: black;
+        --background: white;
+        --backgroundLight: hsl(211, 20%, 95%);
+    }
+    html.theme--dark {
        --text: white;
        --background: black;
-        --backgroundLight: #26272D;
-      }
+        --backgroundLight: hsl(211, 20%, 20%);
+        color-scheme: dark;
+    }
+    html.theme--dim {
+        --text: white;
+        --background: hsl(211, 20%, 4%);
+        --backgroundLight: hsl(211, 20%, 10%);
+        color-scheme: dark;
+    }
+
+    /* Remove autofill styles on Webkit */
+    input:autofill,
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus,
+    input:-webkit-autofill:active{
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: var(--text);
+        transition: background-color 5000s ease-in-out 0s;
+        box-shadow: inset 0 0 20px 20px var(--background);
+        background: var(--background);
+        color: var(--text);
+    }
+    /* Force left-align date/time inputs on iOS mobile */
+    input::-webkit-date-and-time-value {
+      text-align: left;
    }

    body {
@@ -75,6 +103,7 @@
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -ms-overflow-style: scrollbar;
+      font-synthesis-weight: none;
    }

    /* Remove default link styling */
@@ -176,17 +205,21 @@
  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
-  {% block html_head_extra -%}{%- endblock %}
+  <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#1185fe">
+  <meta name="theme-color" content="#ffffff">
  <meta name="application-name" content="Bluesky">
  <meta name="generator" content="bskyweb">
+  <meta property="og:site_name" content="Bluesky Social" />
+
+  {% block html_head_extra -%}{%- endblock %}
 </head>
 <body>
 {%- block body_all %}
 	<div id="root"></div>
    <noscript>
-      <h1>JavaScript Required</h1>
-      <p>This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is.
-      <p>Learn more about Bluesky at <a href="https://blueskyweb.xyz">blueskyweb.xyz</a> and <a href="https://atproto.com">atproto.com</a>.
+      <h1 lang="en">JavaScript Required</h1>
+      <p lang="en">This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is.
+      <p lang="en">Learn more about Bluesky at <a href="https://blueskyweb.xyz">blueskyweb.xyz</a> and <a href="https://atproto.com">atproto.com</a>.
 			{% block noscript_extra %}{% endblock %}
    </noscript>
 {% endblock -%}
@@ -3,14 +3,21 @@
 {% block head_title %}Bluesky{% endblock %}

 {% block html_head_extra -%}
-  <meta name="description" content="See what's next.">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="Bluesky Social">
-  <meta property="og:description" content="See what's next.">
-  <meta property="og:image" content="/static/social-card-default.png">
-  <meta property="og:site_name" content="Bluesky Social">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:site" content="@bluesky">
+  <meta property="og:title" content="Bluesky" />
+  <meta name="twitter:title" content="Bluesky" />
+
+  <meta name="description" content="Social media as it should be. Find your community among millions of users, unleash your creativity, and have some fun again." />
+  <meta name="og:description" content="Social media as it should be. Find your community among millions of users, unleash your creativity, and have some fun again." />
+  <meta name="twitter:description" content="Social media as it should be. Find your community among millions of users, unleash your creativity, and have some fun again." />
+
+  <meta property="og:url" content="https://bsky.app" />
+  <meta name="twitter:url" content="https://bsky.app" />
+
+  <meta property="og:image" content="https://bsky.app/static/social-card-default-gradient.png" />
+  <meta property="twitter:image" content="https://bsky.app/static/social-card-default-gradient.png"  />
+
+  <meta name="twitter:site" content="@bluesky" />
+  <meta name="twitter:card" content="summary_large_image" />
 {%- endblock %}

 {% block noscript_extra %}
@@ -10,7 +10,6 @@

 {% block html_head_extra -%}
 {%- if postView -%}
-  <meta property="og:site_name" content="Bluesky Social">
  <meta property="og:type" content="article">
  <meta property="profile:username" content="{{ profileView.Handle }}">
  {%- if requestURI %}
@@ -21,9 +20,9 @@
  {% else %}
  <meta property="og:title" content="@{{ postView.Author.Handle }}">
  {% endif -%}
-  {%- if postView.Record.Val.Text %}
-  <meta name="description" content="{{ postView.Record.Val.Text }}">
-  <meta property="og:description" content="{{ postView.Record.Val.Text }}">
+  {%- if postText %}
+  <meta name="description" content="{{ postText }}">
+  <meta property="og:description" content="{{ postText }}">
  {% endif -%}
  {%- if imgThumbUrls %}
  {% for imgThumbUrl in imgThumbUrls %}
@@ -47,7 +46,7 @@
  <p id="bsky_display_name">{{ postView.Author.DisplayName }}</p>
  <p id="bsky_handle">{{ postView.Author.Handle }}</p>
  <p id="bsky_did">{{ postView.Author.Did }}</p>
-  <p id="bsky_post_text">{{ postView.Record.Val.Text }}</p>
+  <p id="bsky_post_text">{{ postText }}</p>
  <p id="bsky_post_indexedat">{{ postView.IndexedAt }}</p>
 </div>
 {% endif -%}
@@ -3,10 +3,22 @@
 ## App Build

 - Set up your environment [using the react native instructions](https://reactnative.dev/docs/environment-setup).
+- If you're running macOS, make sure you are running the correct versions of Ruby and Cocoapods:
+  - Check if you've installed Cocoapods through `homebrew`. If you have, remove it:
+    - `brew info cocoapods`
+    - If output says `Installed`:
+    - `brew remove cocoapods`
+  - If you have not installed `rbenv`:
+    - `brew install rbenv`
+    - `rbenv install 2.7.6`
+    - `rbenv global 2.7.6`
+    - Add `eval "$(rbenv init - zsh)"` to your `~/.zshrc`
+  - From inside the project directory:
+    - `bundler install`
 - Setup your environment [for e2e testing using detox](https://wix.github.io/Detox/docs/introduction/getting-started):
-  - yarn global add detox-cli
-  - brew tap wix/brew
-  - brew install applesimutils
+  - `yarn global add detox-cli`
+  - `brew tap wix/brew`
+  - `brew install applesimutils`
 - After initial setup:
  - Copy `google-services.json.example` to `google-services.json` or provide your own `google-services.json`. (A real firebase project is NOT required)
  - `npx expo prebuild` -> you will also need to run this anytime `app.json` or native `package.json` deps change
@@ -1,7 +1,7 @@
 import net from 'net'
 import path from 'path'
 import fs from 'fs'
-import {TestNetwork} from '@atproto/dev-env'
+import {TestNetwork, TestPds} from '@atproto/dev-env'
 import {AtUri, BskyAgent} from '@atproto/api'

 export interface TestUser {
@@ -55,19 +55,36 @@ class StringIdGenerator {
 const ids = new StringIdGenerator()

 export async function createServer(
-  {inviteRequired}: {inviteRequired: boolean} = {inviteRequired: false},
+  {
+    inviteRequired,
+    phoneRequired,
+  }: {inviteRequired: boolean; phoneRequired: boolean} = {
+    inviteRequired: false,
+    phoneRequired: false,
+  },
 ): Promise<TestPDS> {
-  const port = await getPort()
+  const port = 3000
  const port2 = await getPort(port + 1)
  const port3 = await getPort(port2 + 1)
  const pdsUrl = `http://localhost:${port}`
  const id = ids.next()

+  const phoneParams = phoneRequired
+    ? {
+        phoneVerificationRequired: true,
+        twilioAccountSid: 'ACXXXXXXX',
+        twilioAuthToken: 'AUTH',
+        twilioServiceSid: 'VAXXXXXXXX',
+      }
+    : {}
+
  const testNet = await TestNetwork.create({
    pds: {
      port,
      hostname: 'localhost',
+      dbPostgresSchema: `pds_${id}`,
      inviteRequired,
+      ...phoneParams,
    },
    bsky: {
      dbPostgresSchema: `bsky_${id}`,
@@ -76,6 +93,7 @@ export async function createServer(
    },
    plc: {port: port2},
  })
+  mockTwilio(testNet.pds)

  const pic = fs.readFileSync(
    path.join(__dirname, '..', 'assets', 'default-avatar.png'),
@@ -144,6 +162,8 @@ class Mocker {
      email,
      handle: name + '.test',
      password: 'hunter2',
+      verificationPhone: '1234567890',
+      verificationCode: '000000',
    })
    await agent.upsertProfile(async () => {
      const blob = await agent.uploadBlob(this.pic, {
@@ -326,6 +346,7 @@ class Mocker {
    const labelSrvc = ctx.services.label(ctx.db.getPrimary())
    await labelSrvc.createLabels([
      {
+        // @ts-ignore
        src: ctx.cfg.labelerDid,
        uri: did,
        cid: '',
@@ -355,6 +376,7 @@ class Mocker {
    const labelSrvc = ctx.services.label(ctx.db.getPrimary())
    await labelSrvc.createLabels([
      {
+        // @ts-ignore
        src: ctx.cfg.labelerDid,
        uri: profile.uri,
        cid: profile.cid,
@@ -373,6 +395,7 @@ class Mocker {
    const labelSrvc = ctx.services.label(ctx.db.getPrimary())
    await labelSrvc.createLabels([
      {
+        // @ts-ignore
        src: ctx.cfg.labelerDid,
        uri,
        cid,
@@ -430,3 +453,15 @@ async function getPort(start = 3000) {
  }
  throw new Error('Unable to find an available port')
 }
+
+export const mockTwilio = (pds: TestPds) => {
+  if (!pds.ctx.twilio) return
+
+  pds.ctx.twilio.sendCode = async (_number: string) => {
+    // do nothing
+  }
+
+  pds.ctx.twilio.verifyCode = async (_number: string, code: string) => {
+    return code === '000000'
+  }
+}
@@ -1,6 +1,19 @@
 /** @type {import('@lingui/conf').LinguiConfig} */
 module.exports = {
-  locales: ['en', 'hi', 'ja', 'fr', 'de', 'es', 'ko', 'es', 'pt-BR', 'uk'],
+  locales: [
+    'en',
+    'de',
+    'es',
+    'fr',
+    'hi',
+    'id',
+    'ja',
+    'ko',
+    'pt-BR',
+    'uk',
+    'ca',
+    'zh-CN',
+  ],
  catalogs: [
    {
      path: '<rootDir>/src/locale/locales/{locale}/messages',
@@ -0,0 +1,61 @@
+# React Native UITextView
+
+Drop in replacement for `<Text>` that renders a `UITextView`, support selection and native translation features on iOS.
+
+## Installation
+
+In this project, no installation is required. The pod will be installed automatically during a `pod install`.
+
+In another project, clone the repo and copy the `modules/react-native-ui-text-view` directory to your own project
+directory. Afterward, run `pod install`.
+
+## Usage
+
+Replace the outermost `<Text>` with `<UITextView>`. Styles and press events should be handled the same way they would
+with `<Text>`. Both `<UITextView>` and `<Text>` are supported as children of the root `<UITextView>`.
+
+## Technical
+
+React Native's `Text` component allows for "infinite" nesting of further `Text` components. To make a true "drop-in",
+we want to do the same thing.
+
+To achieve this, we first need to handle determining if we are dealing with an ancestor or root `UITextView` component.
+We can implement similar logic to the `Text` component [see Text.js](https://github.com/facebook/react-native/blob/7f2529de7bc9ab1617eaf571e950d0717c3102a6/packages/react-native/Libraries/Text/Text.js).
+
+We create a context that contains a boolean to tell us if we have already rendered the root `UITextView`. We also store
+the root styles so that we can apply those styles if the ancestor `UITextView`s have not overwritten those styles.
+
+All of our children are placed into `RNUITextView`, which is the main native view that will display the iOS `UITextView`.
+
+We next map each child into the view. We have to be careful here to check if the child's `children` prop is a string. If
+it is, that means we have encountered what was once an RN `Text` component. RN doesn't let us pass plain text as
+children outside of `Text`, so we instead just pass the text into the `text` prop on `RNUITextViewChild`. We continue 
+down the tree, until we run out of children.
+
+On the native side, we make use of the shadow view to calculate text container dimensions before the views are mounted.
+We cannot simply set the `UITextView` text first, since React will not have properly measured the layout before this
+occurs.
+
+
+As for `Text` props, the following props are implemented:
+
+- All accessibility props
+- `allowFontScaling`
+- `adjustsFontSizeToFit`
+- `ellipsizeMode`
+- `numberOfLines`
+- `onLayout`
+- `onPress`
+- `onTextLayout`
+- `selectable`
+
+All `ViewStyle` props will apply to the root `UITextView`. Individual children will respect these `TextStyle` styles:
+
+- `color`
+- `fontSize`
+- `fontStyle`
+- `fontWeight`
+- `fontVariant`
+- `letterSpacing`
+- `lineHeight`
+- `textDecorationLine`
@@ -0,0 +1,3 @@
+#import <React/RCTViewManager.h>
+#import <React/RCTBridge.h>
+#import <React/RCTBridge+Private.h>
@@ -0,0 +1,141 @@
+class RNUITextView: UIView {
+  var textView: UITextView
+
+  @objc var numberOfLines: Int = 0 {
+    didSet {
+      textView.textContainer.maximumNumberOfLines = numberOfLines
+    }
+  }
+  @objc var selectable: Bool = true {
+    didSet {
+      textView.isSelectable = selectable
+    }
+  }
+  @objc var ellipsizeMode: String = "tail" {
+    didSet {
+      textView.textContainer.lineBreakMode = self.getLineBreakMode()
+    }
+  }
+  @objc var onTextLayout: RCTDirectEventBlock?
+
+  override init(frame: CGRect) {
+    if #available(iOS 16.0, *) {
+      textView = UITextView(usingTextLayoutManager: false)
+    } else {
+      textView = UITextView()
+    }
+
+    // Disable scrolling
+    textView.isScrollEnabled = false
+    // Remove all the padding
+    textView.textContainerInset = .zero
+    textView.textContainer.lineFragmentPadding = 0
+
+    // Remove other properties
+    textView.isEditable = false
+    textView.backgroundColor = .clear
+
+    // Init
+    super.init(frame: frame)
+    self.clipsToBounds = true
+
+    // Add the view
+    addSubview(textView)
+
+    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(callOnPress(_:)))
+    tapGestureRecognizer.isEnabled = true
+    textView.addGestureRecognizer(tapGestureRecognizer)
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  // Resolves some animation issues
+  override func reactSetFrame(_ frame: CGRect) {
+    UIView.performWithoutAnimation {
+      super.reactSetFrame(frame)
+    }
+  }
+
+  func setText(string: NSAttributedString, size: CGSize, numberOfLines: Int) -> Void {
+    self.textView.frame.size = size
+    self.textView.textContainer.maximumNumberOfLines = numberOfLines
+    self.textView.attributedText = string
+    self.textView.selectedTextRange = nil
+
+    if let onTextLayout = self.onTextLayout {
+      var lines: [String] = []
+      textView.layoutManager.enumerateLineFragments(
+        forGlyphRange: NSRange(location: 0, length: textView.attributedText.length))
+      { (rect, usedRect, textContainer, glyphRange, stop) in
+        let characterRange = self.textView.layoutManager.characterRange(forGlyphRange: glyphRange, actualGlyphRange: nil)
+        let line = (self.textView.text as NSString).substring(with: characterRange)
+        lines.append(line)
+      }
+
+      onTextLayout([
+        "lines": lines
+      ])
+    }
+  }
+
+  @IBAction func callOnPress(_ sender: UITapGestureRecognizer) -> Void {
+    // If we find a child, then call onPress
+    if let child = getPressed(sender) {
+      if textView.selectedTextRange == nil, let onPress = child.onPress {
+        onPress(["": ""])
+      } else {
+        // Clear the selected text range if we are not pressing on a link
+        textView.selectedTextRange = nil
+      }
+    }
+  }
+
+  // Try to get the pressed segment
+  func getPressed(_ sender: UITapGestureRecognizer) -> RNUITextViewChild? {
+    let layoutManager = textView.layoutManager
+    var location = sender.location(in: textView)
+
+    // Remove the padding
+    location.x -= textView.textContainerInset.left
+    location.y -= textView.textContainerInset.top
+
+    // Get the index of the char
+    let charIndex = layoutManager.characterIndex(
+      for: location,
+      in: textView.textContainer,
+      fractionOfDistanceBetweenInsertionPoints: nil
+    )
+
+    for child in self.reactSubviews() {
+      if let child = child as? RNUITextViewChild, let childText = child.text {
+        let fullText = self.textView.attributedText.string
+        let range = fullText.range(of: childText)
+
+        if let lowerBound = range?.lowerBound, let upperBound = range?.upperBound {
+          if charIndex >= lowerBound.utf16Offset(in: fullText) && charIndex <= upperBound.utf16Offset(in: fullText) {
+            return child
+          }
+        }
+      }
+    }
+
+    return nil
+  }
+
+  func getLineBreakMode() -> NSLineBreakMode {
+    switch self.ellipsizeMode {
+    case "head":
+      return .byTruncatingHead
+    case "middle":
+      return .byTruncatingMiddle
+    case "tail":
+      return .byTruncatingTail
+    case "clip":
+      return .byClipping
+    default:
+      return .byTruncatingTail
+    }
+  }
+}
@@ -0,0 +1,4 @@
+class RNUITextViewChild: UIView {
+  @objc var text: String?
+  @objc var onPress: RCTDirectEventBlock?
+}
@@ -0,0 +1,56 @@
+// We want all of our props to be available in the child's shadow view so we
+// can create the attributed text before mount and calculate the needed size
+// for the view.
+class RNUITextViewChildShadow: RCTShadowView {
+  @objc var text: String = ""
+  @objc var color: UIColor = .black
+  @objc var fontSize: CGFloat = 16.0
+  @objc var fontStyle: String = "normal"
+  @objc var fontWeight: String = "normal"
+  @objc var letterSpacing: CGFloat = 0.0
+  @objc var lineHeight: CGFloat = 0.0
+  @objc var pointerEvents: NSString?
+
+  override func isYogaLeafNode() -> Bool {
+    return true
+  }
+
+  override func didSetProps(_ changedProps: [String]!) {
+    guard let superview = self.superview as? RNUITextViewShadow else {
+      return
+    }
+
+    if !YGNodeIsDirty(superview.yogaNode) {
+      superview.setAttributedText()
+    }
+  }
+
+  func getFontWeight() -> UIFont.Weight {
+    switch self.fontWeight {
+    case "bold":
+      return .bold
+    case "normal":
+      return .regular
+    case "100":
+      return .ultraLight
+    case "200":
+      return .ultraLight
+    case "300":
+      return .light
+    case "400":
+      return .regular
+    case "500":
+      return .medium
+    case "600":
+      return .semibold
+    case "700":
+      return .semibold
+    case "800":
+      return .bold
+    case "900":
+      return .heavy
+    default:
+      return .regular
+    }
+  }
+}
@@ -0,0 +1,25 @@
+#import <React/RCTViewManager.h>
+
+@interface RCT_EXTERN_MODULE(RNUITextViewManager, RCTViewManager)
+RCT_REMAP_SHADOW_PROPERTY(numberOfLines, numberOfLines, NSInteger)
+RCT_REMAP_SHADOW_PROPERTY(allowsFontScaling, allowsFontScaling, BOOL)
+
+RCT_EXPORT_VIEW_PROPERTY(onTextLayout, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(ellipsizeMode, NSString)
+RCT_EXPORT_VIEW_PROPERTY(selectable, BOOL)
+
+@end
+
+@interface RCT_EXTERN_MODULE(RNUITextViewChildManager, RCTViewManager)
+RCT_REMAP_SHADOW_PROPERTY(text, text, NSString)
+RCT_REMAP_SHADOW_PROPERTY(color, color, UIColor)
+RCT_REMAP_SHADOW_PROPERTY(fontSize, fontSize, CGFloat)
+RCT_REMAP_SHADOW_PROPERTY(fontStyle, fontStyle, NSString)
+RCT_REMAP_SHADOW_PROPERTY(fontWeight, fontWeight, NSString)
+RCT_REMAP_SHADOW_PROPERTY(letterSpacing, letterSpacing, CGFloat)
+RCT_REMAP_SHADOW_PROPERTY(lineHeight, lineHeight, CGFloat)
+RCT_REMAP_SHADOW_PROPERTY(pointerEvents, pointerEvents, NSString)
+
+RCT_EXPORT_VIEW_PROPERTY(text, NSString)
+RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
+@end
@@ -0,0 +1,30 @@
+@objc(RNUITextViewManager)
+class RNUITextViewManager: RCTViewManager {
+  override func view() -> (RNUITextView) {
+    return RNUITextView()
+  }
+
+  @objc override static func requiresMainQueueSetup() -> Bool {
+    return true
+  }
+
+  override func shadowView() -> RCTShadowView {
+    // Pass the bridge to the shadow view
+    return RNUITextViewShadow(bridge: self.bridge)
+  }
+}
+
+@objc(RNUITextViewChildManager)
+class RNUITextViewChildManager: RCTViewManager {
+  override func view() -> (RNUITextViewChild) {
+    return RNUITextViewChild()
+  }
+
+  @objc override static func requiresMainQueueSetup() -> Bool {
+    return true
+  }
+
+  override func shadowView() -> RCTShadowView {
+    return RNUITextViewChildShadow()
+  }
+}
@@ -0,0 +1,147 @@
+class RNUITextViewShadow: RCTShadowView {
+  // Props
+  @objc var numberOfLines: Int = 0 {
+    didSet {
+      if !YGNodeIsDirty(self.yogaNode) {
+        self.setAttributedText()
+      }
+    }
+  }
+  @objc var allowsFontScaling: Bool = true
+
+  var attributedText: NSAttributedString = NSAttributedString()
+  var frameSize: CGSize = CGSize()
+
+  var lineHeight: CGFloat = 0
+
+  var bridge: RCTBridge
+
+  init(bridge: RCTBridge) {
+    self.bridge = bridge
+    super.init()
+
+    // We need to set a custom measure func here to calculate the height correctly
+    YGNodeSetMeasureFunc(self.yogaNode) { node, width, widthMode, height, heightMode in
+      // Get the shadowview and determine the needed size to set
+      let shadowView = Unmanaged<RNUITextViewShadow>.fromOpaque(YGNodeGetContext(node)).takeUnretainedValue()
+      return shadowView.getNeededSize(maxWidth: width)
+    }
+
+    // Subscribe to ynamic type size changes
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(preferredContentSizeChanged(_:)),
+      name: UIContentSizeCategory.didChangeNotification,
+      object: nil
+    )
+  }
+
+  @objc func preferredContentSizeChanged(_ notification: Notification) {
+    self.setAttributedText()
+  }
+
+  // Tell yoga not to use flexbox
+  override func isYogaLeafNode() -> Bool {
+    return true
+  }
+
+  // We only need to insert text children
+  override func insertReactSubview(_ subview: RCTShadowView!, at atIndex: Int) {
+    if subview.isKind(of: RNUITextViewChildShadow.self) {
+      super.insertReactSubview(subview, at: atIndex)
+    }
+  }
+
+  // Whenever the subvies update, set the text
+  override func didUpdateReactSubviews() {
+    self.setAttributedText()
+  }
+
+  // Whenever we layout, update the UI
+  override func layoutSubviews(with layoutContext: RCTLayoutContext) {
+    // Don't do anything if the layout is dirty
+    if(YGNodeIsDirty(self.yogaNode)) {
+      return
+    }
+
+    // Update the text
+    self.bridge.uiManager.addUIBlock { uiManager, viewRegistry in
+      guard let textView = viewRegistry?[self.reactTag] as? RNUITextView else {
+        return
+      }
+      textView.setText(string: self.attributedText, size: self.frameSize, numberOfLines: self.numberOfLines)
+    }
+  }
+
+  override func dirtyLayout() {
+    super.dirtyLayout()
+    YGNodeMarkDirty(self.yogaNode)
+  }
+
+  // Update the attributed text whenever changes are made to the subviews.
+  func setAttributedText() -> Void {
+    // Create an attributed string to store each of the segments
+    let finalAttributedString = NSMutableAttributedString()
+
+    self.reactSubviews().forEach { child in
+      guard let child = child as? RNUITextViewChildShadow else {
+        return
+      }
+      let scaledFontSize = self.allowsFontScaling ?
+        UIFontMetrics.default.scaledValue(for: child.fontSize) : child.fontSize
+      let font = UIFont.systemFont(ofSize: scaledFontSize, weight: child.getFontWeight())
+
+      // Set some generic attributes that don't need ranges
+      let attributes: [NSAttributedString.Key:Any] = [
+        .font: font,
+        .foregroundColor: child.color,
+      ]
+
+      // Create the attributed string with the generic attributes
+      let string = NSMutableAttributedString(string: child.text, attributes: attributes)
+
+      // Set the paragraph style attributes if necessary
+      let paragraphStyle = NSMutableParagraphStyle()
+      if child.lineHeight != 0.0 {
+        paragraphStyle.minimumLineHeight = child.lineHeight
+        paragraphStyle.maximumLineHeight = child.lineHeight
+        string.addAttribute(
+          NSAttributedString.Key.paragraphStyle,
+          value: paragraphStyle,
+          range: NSMakeRange(0, string.length)
+        )
+
+        // Store that height
+        self.lineHeight = child.lineHeight
+      } else {
+        self.lineHeight = font.lineHeight
+      }
+
+      finalAttributedString.append(string)
+    }
+
+    self.attributedText = finalAttributedString
+    self.dirtyLayout()
+  }
+
+  // Create a YGSize based on the max width
+  func getNeededSize(maxWidth: Float) -> YGSize {
+    // Create the max size and figure out the size of the entire text
+    let maxSize = CGSize(width: CGFloat(maxWidth), height: CGFloat(MAXFLOAT))
+    let textSize = self.attributedText.boundingRect(with: maxSize, options: .usesLineFragmentOrigin, context: nil)
+
+    // Figure out how many total lines there are
+    let totalLines = Int(ceil(textSize.height / self.lineHeight))
+
+    // Default to the text size
+    var neededSize: CGSize = textSize.size
+
+    // If the total lines > max number, return size with the max
+    if self.numberOfLines != 0, totalLines > self.numberOfLines {
+      neededSize = CGSize(width: CGFloat(maxWidth), height: CGFloat(CGFloat(self.numberOfLines) * self.lineHeight))
+    }
+
+    self.frameSize = neededSize
+    return YGSize(width: Float(neededSize.width), height: Float(neededSize.height))
+  }
+}
@@ -0,0 +1,9 @@
+{
+  "name": "react-native-ui-text-view",
+  "version": "0.1.0",
+  "description": "UITextView in React Native on iOS",
+  "main": "src/index",
+  "author": "haileyok",
+  "license": "MIT",
+  "homepage": "https://github.com/bluesky-social/social-app/modules/react-native-ui-text-view"
+}
@@ -0,0 +1,42 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-ui-text-view"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => ".git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-RCTFabric"
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+   end
+  end    
+end
@@ -0,0 +1,76 @@
+import React from 'react'
+import {Platform, StyleSheet, TextProps, ViewStyle} from 'react-native'
+import {RNUITextView, RNUITextViewChild} from './index'
+
+const TextAncestorContext = React.createContext<[boolean, ViewStyle]>([
+  false,
+  StyleSheet.create({}),
+])
+const useTextAncestorContext = () => React.useContext(TextAncestorContext)
+
+const textDefaults: TextProps = {
+  allowFontScaling: true,
+  selectable: true,
+}
+
+export function UITextView({style, children, ...rest}: TextProps) {
+  const [isAncestor, rootStyle] = useTextAncestorContext()
+
+  // Flatten the styles, and apply the root styles when needed
+  const flattenedStyle = React.useMemo(
+    () => StyleSheet.flatten([rootStyle, style]),
+    [rootStyle, style],
+  )
+
+  if (Platform.OS !== 'ios') {
+    throw new Error('UITextView is only available on iOS')
+  }
+
+  if (!isAncestor) {
+    return (
+      <TextAncestorContext.Provider value={[true, flattenedStyle]}>
+        <RNUITextView
+          {...textDefaults}
+          {...rest}
+          ellipsizeMode={rest.ellipsizeMode ?? rest.lineBreakMode ?? 'tail'}
+          style={[{flex: 1}, flattenedStyle]}
+          onPress={undefined} // We want these to go to the children only
+          onLongPress={undefined}>
+          {React.Children.toArray(children).map((c, index) => {
+            if (React.isValidElement(c)) {
+              return c
+            } else if (typeof c === 'string') {
+              return (
+                <RNUITextViewChild
+                  key={index}
+                  style={flattenedStyle}
+                  text={c}
+                  {...rest}
+                />
+              )
+            }
+          })}
+        </RNUITextView>
+      </TextAncestorContext.Provider>
+    )
+  } else {
+    return (
+      <>
+        {React.Children.toArray(children).map((c, index) => {
+          if (React.isValidElement(c)) {
+            return c
+          } else if (typeof c === 'string') {
+            return (
+              <RNUITextViewChild
+                key={index}
+                style={flattenedStyle}
+                text={c}
+                {...rest}
+              />
+            )
+          }
+        })}
+      </>
+    )
+  }
+}
@@ -0,0 +1,42 @@
+import {
+  requireNativeComponent,
+  UIManager,
+  Platform,
+  type ViewStyle,
+  TextProps,
+} from 'react-native'
+
+const LINKING_ERROR =
+  `The package 'react-native-ui-text-view' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ios: "- You have run 'pod install'\n", default: ''}) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n'
+
+export interface RNUITextViewProps extends TextProps {
+  children: React.ReactNode
+  style: ViewStyle[]
+}
+
+export interface RNUITextViewChildProps extends TextProps {
+  text: string
+  onTextPress?: (...args: any[]) => void
+  onTextLongPress?: (...args: any[]) => void
+}
+
+export const RNUITextView =
+  UIManager.getViewManagerConfig &&
+  UIManager.getViewManagerConfig('RNUITextView') != null
+    ? requireNativeComponent<RNUITextViewProps>('RNUITextView')
+    : () => {
+        throw new Error(LINKING_ERROR)
+      }
+
+export const RNUITextViewChild =
+  UIManager.getViewManagerConfig &&
+  UIManager.getViewManagerConfig('RNUITextViewChild') != null
+    ? requireNativeComponent<RNUITextViewChildProps>('RNUITextViewChild')
+    : () => {
+        throw new Error(LINKING_ERROR)
+      }
+
+export * from './UITextView'
@@ -1,6 +1,6 @@
 {
  "name": "bsky.app",
-  "version": "1.63.0",
+  "version": "1.68.0",
  "private": true,
  "engines": {
    "node": ">=18"
@@ -12,7 +12,7 @@
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
-    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp --verbose ./web-build/static/js/*.* ./bskyweb/static/js/",
+    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/",
    "build-all": "yarn intl:build && eas build --platform all",
    "start": "expo start --dev-client",
    "start:prod": "expo start --dev-client --no-dev --minify",
@@ -39,7 +39,7 @@
    "nuke": "rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android"
  },
  "dependencies": {
-    "@atproto/api": "^0.7.4",
+    "@atproto/api": "^0.9.5",
    "@bam.tech/react-native-image-resizer": "^3.0.4",
    "@braintree/sanitize-url": "^6.0.2",
    "@emoji-mart/react": "^1.1.1",
@@ -60,7 +60,7 @@
    "@react-native-community/datetimepicker": "7.6.1",
    "@react-native-masked-view/masked-view": "0.3.0",
    "@react-native-menu/menu": "^0.8.0",
-    "@react-native-picker/picker": "2.5.1",
+    "@react-native-picker/picker": "2.6.1",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
@@ -70,6 +70,7 @@
    "@segment/analytics-react-native": "^2.10.1",
    "@segment/sovran-react-native": "^0.4.5",
    "@sentry/react-native": "5.5.0",
+    "@tamagui/focus-scope": "^1.84.1",
    "@tanstack/react-query": "^5.8.1",
    "@tiptap/core": "^2.0.0-beta.220",
    "@tiptap/extension-document": "^2.0.0-beta.220",
@@ -94,30 +95,32 @@
    "email-validator": "^2.0.4",
    "emoji-mart": "^5.5.2",
    "eventemitter3": "^5.0.1",
-    "expo": "^50.0.0-preview.7",
-    "expo-application": "~5.8.1",
+    "expo": "^50.0.0-preview.10",
+    "expo-application": "~5.8.2",
    "expo-build-properties": "^0.11.0",
    "expo-camera": "~14.0.1",
-    "expo-constants": "~15.4.2",
-    "expo-dev-client": "~3.3.4",
-    "expo-device": "~5.9.1",
-    "expo-image": "~1.10.1",
+    "expo-constants": "~15.4.3",
+    "expo-dev-client": "~3.3.5",
+    "expo-device": "~5.9.2",
+    "expo-image": "~1.10.3",
    "expo-image-manipulator": "^11.8.0",
    "expo-image-picker": "~14.7.1",
-    "expo-localization": "~14.8.1",
+    "expo-localization": "~14.8.2",
    "expo-media-library": "~15.9.1",
-    "expo-notifications": "~0.27.2",
+    "expo-notifications": "~0.27.3",
    "expo-sharing": "^11.10.0",
-    "expo-splash-screen": "~0.26.1",
+    "expo-splash-screen": "~0.26.2",
    "expo-status-bar": "~1.11.1",
-    "expo-system-ui": "~2.9.2",
+    "expo-system-ui": "~2.9.3",
    "expo-task-manager": "~11.7.0",
-    "expo-updates": "~0.24.5",
+    "expo-updates": "~0.24.7",
+    "expo-web-browser": "~12.8.1",
    "fast-text-encoding": "^1.0.6",
    "history": "^5.3.0",
    "js-sha256": "^0.9.0",
    "jwt-decode": "^4.0.0",
    "lande": "^1.0.10",
+    "libphonenumber-js": "^1.10.53",
    "lodash.chunk": "^4.2.0",
    "lodash.debounce": "^4.0.8",
    "lodash.isequal": "^4.5.0",
@@ -140,7 +143,7 @@
    "react-avatar-editor": "^13.0.0",
    "react-circular-progressbar": "^2.1.0",
    "react-dom": "^18.2.0",
-    "react-native": "0.73.1",
+    "react-native": "0.73.2",
    "react-native-appstate-hook": "^1.0.6",
    "react-native-drawer-layout": "^4.0.0-alpha.3",
    "react-native-fs": "^2.20.0",
@@ -148,24 +151,23 @@
    "react-native-get-random-values": "~1.8.0",
    "react-native-haptic-feedback": "^1.14.0",
    "react-native-image-crop-picker": "^0.38.1",
-    "react-native-inappbrowser-reborn": "^3.6.3",
    "react-native-ios-context-menu": "^1.15.3",
    "react-native-linear-gradient": "^2.6.2",
-    "react-native-pager-view": "6.2.2",
+    "react-native-pager-view": "6.2.3",
    "react-native-picker-select": "^8.1.0",
    "react-native-progress": "bluesky-social/react-native-progress",
    "react-native-reanimated": "^3.6.0",
    "react-native-root-siblings": "^4.1.1",
-    "react-native-safe-area-context": "4.7.4",
-    "react-native-screens": "~3.27.0",
-    "react-native-svg": "14.0.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
+    "react-native-svg": "14.1.0",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-uuid": "^2.0.1",
    "react-native-version-number": "^0.3.6",
    "react-native-web": "~0.19.6",
    "react-native-web-linear-gradient": "^1.1.2",
    "react-native-web-webview": "^1.0.2",
-    "react-native-webview": "^13.6.3",
+    "react-native-webview": "13.6.4",
    "react-responsive": "^9.0.2",
    "rn-fetch-blob": "^0.12.0",
    "sentry-expo": "~7.0.1",
@@ -173,10 +175,11 @@
    "tlds": "^1.234.0",
    "use-deep-compare": "^1.1.0",
    "zeego": "^1.6.2",
-    "zod": "^3.20.2"
+    "zod": "^3.20.2",
+    "react-native-ui-text-view": "link:./modules/react-native-ui-text-view"
  },
  "devDependencies": {
-    "@atproto/dev-env": "^0.2.19",
+    "@atproto/dev-env": "^0.2.28",
    "@babel/core": "^7.23.2",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
@@ -204,6 +207,7 @@
    "@types/lodash.shuffle": "^4.2.7",
    "@types/psl": "^1.1.1",
    "@types/react-avatar-editor": "^13.0.0",
+    "@types/react-dom": "^18.2.18",
    "@types/react-responsive": "^8.0.5",
    "@types/react-test-renderer": "^17.0.1",
    "@typescript-eslint/eslint-plugin": "^5.48.2",
@@ -0,0 +1,10 @@
+diff --git a/node_modules/@lingui/core/dist/index.mjs b/node_modules/@lingui/core/dist/index.mjs
+index 9759736..881f67b 100644
+--- a/node_modules/@lingui/core/dist/index.mjs
+++ b/node_modules/@lingui/core/dist/index.mjs
+@@ -1,4 +1,4 @@
+-import unraw from 'unraw';
+import { unraw } from 'unraw';
+ import { compileMessage } from '@lingui/message-utils/compileMessage';
+ 
+ const isString = (s) => typeof s === "string";
@@ -1,12 +0,0 @@
-diff --git a/node_modules/babel-preset-fbjs/plugins/inline-requires.js b/node_modules/babel-preset-fbjs/plugins/inline-requires.js
-index b11fc83..e18661a 100644
--- a/node_modules/babel-preset-fbjs/plugins/inline-requires.js
-+++ b/node_modules/babel-preset-fbjs/plugins/inline-requires.js
-@@ -256,6 +256,7 @@ function getInlineableModule(path, state) {
- 
-   return moduleName == null ||
-     state.ignoredRequires.has(moduleName) ||
-+    moduleName.startsWith('@babel/runtime/') ||
-     isRequireInScope
-     ? null
-     : { moduleName, requireFnName: fnName };
@@ -1,5 +1,5 @@
 diff --git a/node_modules/metro-transform-worker/src/index.js b/node_modules/metro-transform-worker/src/index.js
-index cae11e7..42f251b 100644
+index 9f2e3d2..5222c8e 100644
 --- a/node_modules/metro-transform-worker/src/index.js
 +++ b/node_modules/metro-transform-worker/src/index.js
@@ -189,6 +189,10 @@ async function transformJS(file, { config, options, projectRoot }) {
@@ -1,17 +0,0 @@
-diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
-index 9dca6a5..090bda5 100644
--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
-+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
-@@ -266,11 +266,10 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo
- 
- - (void)textViewDidChangeSelection:(__unused UITextView *)textView
- {
-  if (_lastStringStateWasUpdatedWith && ![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
-+  if (![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
-     [self textViewDidChange:_backedTextInputView];
-     _ignoreNextTextInputCall = YES;
-   }
-  _lastStringStateWasUpdatedWith = _backedTextInputView.attributedText;
-   [self textViewProbablyDidChangeSelection];
- }
- 
@@ -0,0 +1,92 @@
+diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
+index 9dca6a5..090bda5 100644
+--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
+@@ -266,11 +266,10 @@ - (void)textViewDidChange:(__unused UITextView *)textView
+
+ - (void)textViewDidChangeSelection:(__unused UITextView *)textView
+ {
+-  if (_lastStringStateWasUpdatedWith && ![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
+  if (![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
+     [self textViewDidChange:_backedTextInputView];
+     _ignoreNextTextInputCall = YES;
+   }
+-  _lastStringStateWasUpdatedWith = _backedTextInputView.attributedText;
+   [self textViewProbablyDidChangeSelection];
+ }
+
+diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm
+index 1f06b79..ab458f3 100644
+--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm
+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm
+@@ -87,7 +87,7 @@ - (void)invalidateContentSize
+     return;
+   }
+
+-  CGSize maximumSize = self.layoutMetrics.frame.size;
+  CGSize maximumSize = self.layoutMetrics.contentFrame.size;
+
+   if (_maximumNumberOfLines == 1) {
+     maximumSize.width = CGFLOAT_MAX;
+@@ -158,6 +158,8 @@ - (void)uiManagerWillPerformMounting
+     [attributedText insertAttributedString:propertyAttributedText atIndex:0];
+   }
+
+  [self postprocessAttributedText:attributedText];
+
+   NSAttributedString *newAttributedText;
+   if (![_previousAttributedText isEqualToAttributedString:attributedText]) {
+     // We have to follow `set prop` pattern:
+@@ -191,6 +193,52 @@ - (void)uiManagerWillPerformMounting
+   }];
+ }
+
+- (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText
+{
+  __block CGFloat maximumLineHeight = 0;
+
+  [attributedText enumerateAttribute:NSParagraphStyleAttributeName
+                             inRange:NSMakeRange(0, attributedText.length)
+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                          usingBlock:^(NSParagraphStyle *paragraphStyle, __unused NSRange range, __unused BOOL *stop) {
+    if (!paragraphStyle) {
+      return;
+    }
+
+    maximumLineHeight = MAX(paragraphStyle.maximumLineHeight, maximumLineHeight);
+  }];
+
+  if (maximumLineHeight == 0) {
+    // `lineHeight` was not specified, nothing to do.
+    return;
+  }
+
+  __block CGFloat maximumFontLineHeight = 0;
+
+  [attributedText enumerateAttribute:NSFontAttributeName
+                             inRange:NSMakeRange(0, attributedText.length)
+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                          usingBlock:^(UIFont *font, NSRange range, __unused BOOL *stop) {
+    if (!font) {
+      return;
+    }
+
+    if (maximumFontLineHeight <= font.lineHeight) {
+      maximumFontLineHeight = font.lineHeight;
+    }
+  }];
+
+  if (maximumLineHeight < maximumFontLineHeight) {
+    return;
+  }
+
+  CGFloat baseLineOffset = maximumLineHeight / 2.0 - maximumFontLineHeight / 2.0;
+
+  [attributedText addAttribute:NSBaselineOffsetAttributeName
+                         value:@(baseLineOffset)
+                         range:NSMakeRange(0, attributedText.length)];
+}
+
+ #pragma mark -
+
+ - (NSAttributedString *)measurableAttributedText
@@ -0,0 +1,5 @@
+# TextInput Patch
+
+Patching `RCTBaseTextShadowInput.mm` from https://github.com/facebook/react-native/pull/38359. This fixes some text
+getting cut off inside the composer. This was merged in December, so we should be able to remove this patch when RN
+ships the next release.
@@ -13,9 +13,10 @@ import {

 import 'view/icons'

+import {ThemeProvider as Alf} from '#/alf'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {init as initPersistedState} from '#/state/persisted'
 import {listenSessionDropped} from './state/events'
-import {useColorMode} from 'state/shell'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {s} from 'lib/styles'
 import {Shell} from 'view/shell'
@@ -25,11 +26,13 @@ import {queryClient} from 'lib/react-query'
 import {TestCtrls} from 'view/com/testing/TestCtrls'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as ModalStateProvider} from 'state/modals'
+import {Provider as DialogStateProvider} from 'state/dialogs'
 import {Provider as LightboxStateProvider} from 'state/lightbox'
 import {Provider as MutedThreadsProvider} from 'state/muted-threads'
 import {Provider as InvitesStateProvider} from 'state/invites'
 import {Provider as PrefsStateProvider} from 'state/preferences'
 import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
+import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
 import I18nProvider from './locale/i18nProvider'
 import {
  Provider as SessionProvider,
@@ -39,46 +42,54 @@ import {
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import * as persisted from '#/state/persisted'
 import {Splash} from '#/Splash'
+import {Provider as PortalProvider} from '#/components/Portal'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'

 SplashScreen.preventAutoHideAsync()

 function InnerApp() {
-  const colorMode = useColorMode()
  const {isInitialLoad, currentAccount} = useSession()
  const {resumeSession} = useSessionApi()
+  const theme = useColorModeTheme()
+  const {_} = useLingui()

  // init
  useEffect(() => {
    notifications.init(queryClient)
    listenSessionDropped(() => {
-      Toast.show('Sorry! Your session expired. Please log in again.')
+      Toast.show(_(msg`Sorry! Your session expired. Please log in again.`))
    })

    const account = persisted.get('session').currentAccount
    resumeSession(account)
-  }, [resumeSession])
+  }, [resumeSession, _])

  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-      <Splash isReady={!isInitialLoad}>
-        <React.Fragment
-          // Resets the entire tree below when it changes:
-          key={currentAccount?.did}>
-          <LoggedOutViewProvider>
-            <UnreadNotifsProvider>
-              <ThemeProvider theme={colorMode}>
-                {/* All components should be within this provider */}
-                <RootSiblingParent>
-                  <GestureHandlerRootView style={s.h100pct}>
-                    <TestCtrls />
-                    <Shell />
-                  </GestureHandlerRootView>
-                </RootSiblingParent>
-              </ThemeProvider>
-            </UnreadNotifsProvider>
-          </LoggedOutViewProvider>
-        </React.Fragment>
-      </Splash>
+      <Alf theme={theme}>
+        <Splash isReady={!isInitialLoad}>
+          <React.Fragment
+            // Resets the entire tree below when it changes:
+            key={currentAccount?.did}>
+            <LoggedOutViewProvider>
+              <SelectedFeedProvider>
+                <UnreadNotifsProvider>
+                  <ThemeProvider theme={theme}>
+                    {/* All components should be within this provider */}
+                    <RootSiblingParent>
+                      <GestureHandlerRootView style={s.h100pct}>
+                        <TestCtrls />
+                        <Shell />
+                      </GestureHandlerRootView>
+                    </RootSiblingParent>
+                  </ThemeProvider>
+                </UnreadNotifsProvider>
+              </SelectedFeedProvider>
+            </LoggedOutViewProvider>
+          </React.Fragment>
+        </Splash>
+      </Alf>
    </SafeAreaProvider>
  )
 }
@@ -106,11 +117,15 @@ function App() {
            <MutedThreadsProvider>
              <InvitesStateProvider>
                <ModalStateProvider>
-                  <LightboxStateProvider>
-                    <I18nProvider>
-                      <InnerApp />
-                    </I18nProvider>
-                  </LightboxStateProvider>
+                  <DialogStateProvider>
+                    <LightboxStateProvider>
+                      <I18nProvider>
+                        <PortalProvider>
+                          <InnerApp />
+                        </PortalProvider>
+                      </I18nProvider>
+                    </LightboxStateProvider>
+                  </DialogStateProvider>
                </ModalStateProvider>
              </InvitesStateProvider>
            </MutedThreadsProvider>
@@ -7,19 +7,22 @@ import {RootSiblingParent} from 'react-native-root-siblings'

 import 'view/icons'

+import {ThemeProvider as Alf} from '#/alf'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {init as initPersistedState} from '#/state/persisted'
-import {useColorMode} from 'state/shell'
 import {Shell} from 'view/shell/index'
 import {ToastContainer} from 'view/com/util/Toast.web'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {queryClient} from 'lib/react-query'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as ModalStateProvider} from 'state/modals'
+import {Provider as DialogStateProvider} from 'state/dialogs'
 import {Provider as LightboxStateProvider} from 'state/lightbox'
 import {Provider as MutedThreadsProvider} from 'state/muted-threads'
 import {Provider as InvitesStateProvider} from 'state/invites'
 import {Provider as PrefsStateProvider} from 'state/preferences'
 import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
+import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
 import I18nProvider from './locale/i18nProvider'
 import {
  Provider as SessionProvider,
@@ -28,11 +31,12 @@ import {
 } from 'state/session'
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import * as persisted from '#/state/persisted'
+import {Provider as PortalProvider} from '#/components/Portal'

 function InnerApp() {
  const {isInitialLoad, currentAccount} = useSession()
  const {resumeSession} = useSessionApi()
-  const colorMode = useColorMode()
+  const theme = useColorModeTheme()

  // init
  useEffect(() => {
@@ -44,23 +48,27 @@ function InnerApp() {
  if (isInitialLoad) return null

  return (
-    <React.Fragment
-      // Resets the entire tree below when it changes:
-      key={currentAccount?.did}>
-      <LoggedOutViewProvider>
-        <UnreadNotifsProvider>
-          <ThemeProvider theme={colorMode}>
-            {/* All components should be within this provider */}
-            <RootSiblingParent>
-              <SafeAreaProvider>
-                <Shell />
-              </SafeAreaProvider>
-            </RootSiblingParent>
-            <ToastContainer />
-          </ThemeProvider>
-        </UnreadNotifsProvider>
-      </LoggedOutViewProvider>
-    </React.Fragment>
+    <Alf theme={theme}>
+      <React.Fragment
+        // Resets the entire tree below when it changes:
+        key={currentAccount?.did}>
+        <LoggedOutViewProvider>
+          <SelectedFeedProvider>
+            <UnreadNotifsProvider>
+              <ThemeProvider theme={theme}>
+                {/* All components should be within this provider */}
+                <RootSiblingParent>
+                  <SafeAreaProvider>
+                    <Shell />
+                  </SafeAreaProvider>
+                </RootSiblingParent>
+                <ToastContainer />
+              </ThemeProvider>
+            </UnreadNotifsProvider>
+          </SelectedFeedProvider>
+        </LoggedOutViewProvider>
+      </React.Fragment>
+    </Alf>
  )
 }

@@ -87,11 +95,15 @@ function App() {
            <MutedThreadsProvider>
              <InvitesStateProvider>
                <ModalStateProvider>
-                  <LightboxStateProvider>
-                    <I18nProvider>
-                      <InnerApp />
-                    </I18nProvider>
-                  </LightboxStateProvider>
+                  <DialogStateProvider>
+                    <LightboxStateProvider>
+                      <I18nProvider>
+                        <PortalProvider>
+                          <InnerApp />
+                        </PortalProvider>
+                      </I18nProvider>
+                    </LightboxStateProvider>
+                  </DialogStateProvider>
                </ModalStateProvider>
              </InvitesStateProvider>
            </MutedThreadsProvider>
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import {StyleSheet} from 'react-native'
 import {
  NavigationContainer,
  createNavigationContainerRef,
@@ -25,7 +24,6 @@ import {
 import {BottomBar} from './view/shell/bottom-bar/BottomBar'
 import {buildStateObject} from 'lib/routes/helpers'
 import {State, RouteParams} from 'lib/routes/types'
-import {colors} from 'lib/styles'
 import {isAndroid, isNative} from 'platform/detection'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {router} from './routes'
@@ -41,6 +39,7 @@ import {
  setEmailConfirmationRequested,
 } from './state/shell/reminders'
 import {init as initAnalytics} from './lib/analytics/analytics'
+import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration'

 import {HomeScreen} from './view/screens/Home'
 import {SearchScreen} from './view/screens/Search'
@@ -61,7 +60,7 @@ import {ProfileListScreen} from './view/screens/ProfileList'
 import {PostThreadScreen} from './view/screens/PostThread'
 import {PostLikedByScreen} from './view/screens/PostLikedBy'
 import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
-import {DebugScreen} from './view/screens/Debug'
+import {Storybook} from './view/screens/Storybook'
 import {LogScreen} from './view/screens/Log'
 import {SupportScreen} from './view/screens/Support'
 import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
@@ -76,6 +75,8 @@ import {PreferencesHomeFeed} from 'view/screens/PreferencesHomeFeed'
 import {PreferencesThreads} from 'view/screens/PreferencesThreads'
 import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds'
 import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStackNavigatorWithAuth'
+import {msg} from '@lingui/macro'
+import {i18n, MessageDescriptor} from '@lingui/core'

 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()

@@ -93,162 +94,168 @@ const Tab = createBottomTabNavigator<BottomTabNavigatorParams>()
 * These "common screens" are reused across stacks.
 */
 function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
-  const title = (page: string) => bskyTitle(page, unreadCountLabel)
+  const title = (page: MessageDescriptor) =>
+    bskyTitle(i18n._(page), unreadCountLabel)

  return (
    <>
      <Stack.Screen
        name="NotFound"
        getComponent={() => NotFoundScreen}
-        options={{title: title('Not Found')}}
+        options={{title: title(msg`Not Found`)}}
      />
      <Stack.Screen
        name="Lists"
        component={ListsScreen}
-        options={{title: title('Lists'), requireAuth: true}}
+        options={{title: title(msg`Lists`), requireAuth: true}}
      />
      <Stack.Screen
        name="Moderation"
        getComponent={() => ModerationScreen}
-        options={{title: title('Moderation'), requireAuth: true}}
+        options={{title: title(msg`Moderation`), requireAuth: true}}
      />
      <Stack.Screen
        name="ModerationModlists"
        getComponent={() => ModerationModlistsScreen}
-        options={{title: title('Moderation Lists'), requireAuth: true}}
+        options={{title: title(msg`Moderation Lists`), requireAuth: true}}
      />
      <Stack.Screen
        name="ModerationMutedAccounts"
        getComponent={() => ModerationMutedAccounts}
-        options={{title: title('Muted Accounts'), requireAuth: true}}
+        options={{title: title(msg`Muted Accounts`), requireAuth: true}}
      />
      <Stack.Screen
        name="ModerationBlockedAccounts"
        getComponent={() => ModerationBlockedAccounts}
-        options={{title: title('Blocked Accounts'), requireAuth: true}}
+        options={{title: title(msg`Blocked Accounts`), requireAuth: true}}
      />
      <Stack.Screen
        name="Settings"
        getComponent={() => SettingsScreen}
-        options={{title: title('Settings'), requireAuth: true}}
+        options={{title: title(msg`Settings`), requireAuth: true}}
      />
      <Stack.Screen
        name="LanguageSettings"
        getComponent={() => LanguageSettingsScreen}
-        options={{title: title('Language Settings'), requireAuth: true}}
+        options={{title: title(msg`Language Settings`), requireAuth: true}}
      />
      <Stack.Screen
        name="Profile"
        getComponent={() => ProfileScreen}
        options={({route}) => ({
-          title: title(`@${route.params.name}`),
-          animation: 'none',
+          title: bskyTitle(`@${route.params.name}`, unreadCountLabel),
        })}
      />
      <Stack.Screen
        name="ProfileFollowers"
        getComponent={() => ProfileFollowersScreen}
        options={({route}) => ({
-          title: title(`People following @${route.params.name}`),
+          title: title(msg`People following @${route.params.name}`),
        })}
      />
      <Stack.Screen
        name="ProfileFollows"
        getComponent={() => ProfileFollowsScreen}
        options={({route}) => ({
-          title: title(`People followed by @${route.params.name}`),
+          title: title(msg`People followed by @${route.params.name}`),
        })}
      />
      <Stack.Screen
        name="ProfileList"
        getComponent={() => ProfileListScreen}
-        options={{title: title('List'), requireAuth: true}}
+        options={{title: title(msg`List`), requireAuth: true}}
      />
      <Stack.Screen
        name="PostThread"
        getComponent={() => PostThreadScreen}
-        options={({route}) => ({title: title(`Post by @${route.params.name}`)})}
+        options={({route}) => ({
+          title: title(msg`Post by @${route.params.name}`),
+        })}
      />
      <Stack.Screen
        name="PostLikedBy"
        getComponent={() => PostLikedByScreen}
-        options={({route}) => ({title: title(`Post by @${route.params.name}`)})}
+        options={({route}) => ({
+          title: title(msg`Post by @${route.params.name}`),
+        })}
      />
      <Stack.Screen
        name="PostRepostedBy"
        getComponent={() => PostRepostedByScreen}
-        options={({route}) => ({title: title(`Post by @${route.params.name}`)})}
+        options={({route}) => ({
+          title: title(msg`Post by @${route.params.name}`),
+        })}
      />
      <Stack.Screen
        name="ProfileFeed"
        getComponent={() => ProfileFeedScreen}
-        options={{title: title('Feed'), requireAuth: true}}
+        options={{title: title(msg`Feed`), requireAuth: true}}
      />
      <Stack.Screen
        name="ProfileFeedLikedBy"
        getComponent={() => ProfileFeedLikedByScreen}
-        options={{title: title('Liked by')}}
+        options={{title: title(msg`Liked by`)}}
      />
      <Stack.Screen
        name="Debug"
-        getComponent={() => DebugScreen}
-        options={{title: title('Debug'), requireAuth: true}}
+        getComponent={() => Storybook}
+        options={{title: title(msg`Storybook`), requireAuth: true}}
      />
      <Stack.Screen
        name="Log"
        getComponent={() => LogScreen}
-        options={{title: title('Log'), requireAuth: true}}
+        options={{title: title(msg`Log`), requireAuth: true}}
      />
      <Stack.Screen
        name="Support"
        getComponent={() => SupportScreen}
-        options={{title: title('Support')}}
+        options={{title: title(msg`Support`)}}
      />
      <Stack.Screen
        name="PrivacyPolicy"
        getComponent={() => PrivacyPolicyScreen}
-        options={{title: title('Privacy Policy')}}
+        options={{title: title(msg`Privacy Policy`)}}
      />
      <Stack.Screen
        name="TermsOfService"
        getComponent={() => TermsOfServiceScreen}
-        options={{title: title('Terms of Service')}}
+        options={{title: title(msg`Terms of Service`)}}
      />
      <Stack.Screen
        name="CommunityGuidelines"
        getComponent={() => CommunityGuidelinesScreen}
-        options={{title: title('Community Guidelines')}}
+        options={{title: title(msg`Community Guidelines`)}}
      />
      <Stack.Screen
        name="CopyrightPolicy"
        getComponent={() => CopyrightPolicyScreen}
-        options={{title: title('Copyright Policy')}}
+        options={{title: title(msg`Copyright Policy`)}}
      />
      <Stack.Screen
        name="AppPasswords"
        getComponent={() => AppPasswords}
-        options={{title: title('App Passwords'), requireAuth: true}}
+        options={{title: title(msg`App Passwords`), requireAuth: true}}
      />
      <Stack.Screen
        name="SavedFeeds"
        getComponent={() => SavedFeeds}
-        options={{title: title('Edit My Feeds'), requireAuth: true}}
+        options={{title: title(msg`Edit My Feeds`), requireAuth: true}}
      />
      <Stack.Screen
        name="PreferencesHomeFeed"
        getComponent={() => PreferencesHomeFeed}
-        options={{title: title('Home Feed Preferences'), requireAuth: true}}
+        options={{title: title(msg`Home Feed Preferences`), requireAuth: true}}
      />
      <Stack.Screen
        name="PreferencesThreads"
        getComponent={() => PreferencesThreads}
-        options={{title: title('Threads Preferences'), requireAuth: true}}
+        options={{title: title(msg`Threads Preferences`), requireAuth: true}}
      />
      <Stack.Screen
        name="PreferencesExternalEmbeds"
        getComponent={() => PreferencesExternalEmbeds}
        options={{
-          title: title('External Media Preferences'),
+          title: title(msg`External Media Preferences`),
          requireAuth: true,
        }}
      />
@@ -290,7 +297,7 @@ function TabsNavigator() {
 }

 function HomeTabNavigator() {
-  const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
+  const pal = usePalette('default')

  return (
    <HomeTab.Navigator
@@ -300,7 +307,7 @@ function HomeTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle,
+        contentStyle: pal.view,
      }}>
      <HomeTab.Screen
        name="Home"
@@ -313,7 +320,7 @@ function HomeTabNavigator() {
 }

 function SearchTabNavigator() {
-  const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
+  const pal = usePalette('default')
  return (
    <SearchTab.Navigator
      screenOptions={{
@@ -322,7 +329,7 @@ function SearchTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle,
+        contentStyle: pal.view,
      }}>
      <SearchTab.Screen name="Search" getComponent={() => SearchScreen} />
      {commonScreens(SearchTab as typeof HomeTab)}
@@ -331,7 +338,7 @@ function SearchTabNavigator() {
 }

 function FeedsTabNavigator() {
-  const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
+  const pal = usePalette('default')
  return (
    <FeedsTab.Navigator
      screenOptions={{
@@ -340,7 +347,7 @@ function FeedsTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle,
+        contentStyle: pal.view,
      }}>
      <FeedsTab.Screen
        name="Feeds"
@@ -353,7 +360,7 @@ function FeedsTabNavigator() {
 }

 function NotificationsTabNavigator() {
-  const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
+  const pal = usePalette('default')
  return (
    <NotificationsTab.Navigator
      screenOptions={{
@@ -362,7 +369,7 @@ function NotificationsTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle,
+        contentStyle: pal.view,
      }}>
      <NotificationsTab.Screen
        name="Notifications"
@@ -375,7 +382,7 @@ function NotificationsTabNavigator() {
 }

 function MyProfileTabNavigator() {
-  const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
+  const pal = usePalette('default')
  return (
    <MyProfileTab.Navigator
      screenOptions={{
@@ -384,7 +391,7 @@ function MyProfileTabNavigator() {
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle,
+        contentStyle: pal.view,
      }}>
      <MyProfileTab.Screen
        // @ts-ignore // TODO: fix this broken type in ProfileScreen
@@ -406,36 +413,38 @@ function MyProfileTabNavigator() {
 const FlatNavigator = () => {
  const pal = usePalette('default')
  const numUnread = useUnreadNotifications()
+  const screenListeners = useWebScrollRestoration()
+  const title = (page: MessageDescriptor) => bskyTitle(i18n._(page), numUnread)

-  const title = (page: string) => bskyTitle(page, numUnread)
  return (
    <Flat.Navigator
+      screenListeners={screenListeners}
      screenOptions={{
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
        headerShown: false,
        animationDuration: 250,
-        contentStyle: [pal.view],
+        contentStyle: pal.view,
      }}>
      <Flat.Screen
        name="Home"
        getComponent={() => HomeScreen}
-        options={{title: title('Home'), requireAuth: true}}
+        options={{title: title(msg`Home`), requireAuth: true}}
      />
      <Flat.Screen
        name="Search"
        getComponent={() => SearchScreen}
-        options={{title: title('Search')}}
+        options={{title: title(msg`Search`)}}
      />
      <Flat.Screen
        name="Feeds"
        getComponent={() => FeedsScreen}
-        options={{title: title('Feeds'), requireAuth: true}}
+        options={{title: title(msg`Feeds`), requireAuth: true}}
      />
      <Flat.Screen
        name="Notifications"
        getComponent={() => NotificationsScreen}
-        options={{title: title('Notifications'), requireAuth: true}}
+        options={{title: title(msg`Notifications`), requireAuth: true}}
      />
      {commonScreens(Flat as typeof HomeTab, numUnread)}
    </Flat.Navigator>
@@ -611,15 +620,6 @@ function handleLink(url: string) {
  }
 }

-const styles = StyleSheet.create({
-  bgDark: {
-    backgroundColor: colors.black,
-  },
-  bgLight: {
-    backgroundColor: colors.white,
-  },
-})
-
 let didInit = false
 function logModuleInitTime() {
  if (didInit) {
@@ -1,8 +1,13 @@
 import React, {useCallback, useEffect} from 'react'
-import {View, StyleSheet, Image as RNImage} from 'react-native'
+import {
+  View,
+  StyleSheet,
+  Image as RNImage,
+  AccessibilityInfo,
+  useColorScheme,
+} from 'react-native'
 import * as SplashScreen from 'expo-splash-screen'
 import {Image} from 'expo-image'
-import {platformApiLevel} from 'expo-device'
 import Animated, {
  interpolate,
  runOnJS,
@@ -15,9 +20,18 @@ import MaskedView from '@react-native-masked-view/masked-view'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Svg, {Path, SvgProps} from 'react-native-svg'

+import {isAndroid} from '#/platform/detection'
+import {useThemePrefs} from 'state/shell'
+import {Logotype} from '#/view/icons/Logotype'
+
 // @ts-ignore
 import splashImagePointer from '../assets/splash.png'
+// @ts-ignore
+import darkSplashImagePointer from '../assets/splash-dark.png'
 const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
+const darkSplashImageUri = RNImage.resolveAssetSource(
+  darkSplashImagePointer,
+).uri

 export const Logo = React.forwardRef(function LogoImpl(props: SvgProps, ref) {
  const width = 1000
@@ -28,9 +42,9 @@ export const Logo = React.forwardRef(function LogoImpl(props: SvgProps, ref) {
      // @ts-ignore it's fiiiiine
      ref={ref}
      viewBox="0 0 64 66"
-      style={{width, height}}>
+      style={[{width, height}, props.style]}>
      <Path
-        fill="#fff"
+        fill={props.fill || '#fff'}
        d="M13.873 3.77C21.21 9.243 29.103 20.342 32 26.3v15.732c0-.335-.13.043-.41.858-1.512 4.414-7.418 21.642-20.923 7.87-7.111-7.252-3.819-14.503 9.125-16.692-7.405 1.252-15.73-.817-18.014-8.93C1.12 22.804 0 8.431 0 6.488 0-3.237 8.579-.18 13.873 3.77ZM50.127 3.77C42.79 9.243 34.897 20.342 32 26.3v15.732c0-.335.13.043.41.858 1.512 4.414 7.418 21.642 20.923 7.87 7.111-7.252 3.819-14.503-9.125-16.692 7.405 1.252 15.73-.817 18.014-8.93C62.88 22.804 64 8.431 64 6.488 64-3.237 55.422-.18 50.127 3.77Z"
      />
    </Svg>
@@ -52,9 +66,21 @@ export function Splash(props: React.PropsWithChildren<Props>) {
  const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
  const [isImageLoaded, setIsImageLoaded] = React.useState(false)
  const [isLayoutReady, setIsLayoutReady] = React.useState(false)
-  const isReady = props.isReady && isImageLoaded && isLayoutReady
+  const [reduceMotion, setReduceMotion] = React.useState<boolean | undefined>(
+    false,
+  )
+  const isReady =
+    props.isReady &&
+    isImageLoaded &&
+    isLayoutReady &&
+    reduceMotion !== undefined

-  const logoAnimations = useAnimatedStyle(() => {
+  const {colorMode} = useThemePrefs()
+  const colorScheme = useColorScheme()
+  const themeName = colorMode === 'system' ? colorScheme : colorMode
+  const isDarkMode = themeName === 'dark'
+
+  const logoAnimation = useAnimatedStyle(() => {
    return {
      transform: [
        {
@@ -64,7 +90,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
          scale: interpolate(
            outroLogo.value,
            [0, 0.08, 1],
-            [1, 0.8, 400],
+            [1, 0.8, 500],
            'clamp',
          ),
        },
@@ -72,6 +98,32 @@ export function Splash(props: React.PropsWithChildren<Props>) {
      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
    }
  })
+  const bottomLogoAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
+    }
+  })
+  const reducedLogoAnimation = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'),
+        },
+      ],
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
+    }
+  })
+
+  const logoWrapperAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        outroAppOpacity.value,
+        [0, 0.1, 0.2, 1],
+        [1, 1, 0, 0],
+        'clamp',
+      ),
+    }
+  })

  const appAnimation = useAnimatedStyle(() => {
    return {
@@ -82,7 +134,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
      ],
      opacity: interpolate(
        outroAppOpacity.value,
-        [0, 0.08, 0.15, 1],
+        [0, 0.1, 0.2, 1],
        [0, 0, 1, 1],
        'clamp',
      ),
@@ -126,63 +178,100 @@ export function Splash(props: React.PropsWithChildren<Props>) {
    }
  }, [onFinish, intro, outroLogo, outroApp, outroAppOpacity, isReady])

+  useEffect(() => {
+    AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion)
+  }, [])
+
+  const logoAnimations =
+    reduceMotion === true ? reducedLogoAnimation : logoAnimation
+
  return (
    <View style={{flex: 1}} onLayout={onLayout}>
      {!isAnimationComplete && (
-        <Image
-          accessibilityIgnoresInvertColors
-          onLoadEnd={onLoadEnd}
-          source={{uri: splashImageUri}}
-          style={StyleSheet.absoluteFillObject}
-        />
+        <View style={StyleSheet.absoluteFillObject}>
+          <Image
+            accessibilityIgnoresInvertColors
+            onLoadEnd={onLoadEnd}
+            source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
+            style={StyleSheet.absoluteFillObject}
+          />
+
+          <Animated.View
+            style={[
+              bottomLogoAnimation,
+              {
+                position: 'absolute',
+                bottom: insets.bottom + 40,
+                left: 0,
+                right: 0,
+                alignItems: 'center',
+                justifyContent: 'center',
+                opacity: 0,
+              },
+            ]}>
+            <Logotype fill="#fff" width={90} />
+          </Animated.View>
+        </View>
      )}

-      {platformApiLevel && platformApiLevel <= 25 ? (
-        // Use a simple fade on older versions of android (work around a bug)
-        <>
-          {!isAnimationComplete && (
-            <View
-              style={[
-                StyleSheet.absoluteFillObject,
-                {backgroundColor: 'white'},
-              ]}
-            />
-          )}
-          <Animated.View style={[{flex: 1}, appAnimation]}>
-            {props.children}
-          </Animated.View>
-        </>
-      ) : (
-        <MaskedView
-          style={[StyleSheet.absoluteFillObject]}
-          maskElement={
-            <Animated.View
-              style={[
-                {
-                  // Transparent background because mask is based off alpha channel.
-                  backgroundColor: 'transparent',
-                  flex: 1,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
-                },
-              ]}>
-              <AnimatedLogo style={[logoAnimations]} />
+      {isReady &&
+        (isAndroid || reduceMotion === true ? (
+          // Use a simple fade on older versions of android (work around a bug)
+          <>
+            <Animated.View style={[{flex: 1}, appAnimation]}>
+              {props.children}
            </Animated.View>
-          }>
-          {!isAnimationComplete && (
-            <View
-              style={[
-                StyleSheet.absoluteFillObject,
-                {backgroundColor: 'white'},
-              ]}
-            />
-          )}
-          <Animated.View style={[{flex: 1}, appAnimation]}>
-            {props.children}
-          </Animated.View>
-        </MaskedView>
-      )}
+
+            {!isAnimationComplete && (
+              <Animated.View
+                style={[
+                  StyleSheet.absoluteFillObject,
+                  logoWrapperAnimation,
+                  {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
+                  },
+                ]}>
+                <AnimatedLogo
+                  fill="#fff"
+                  style={[{opacity: 0}, logoAnimations]}
+                />
+              </Animated.View>
+            )}
+          </>
+        ) : (
+          <MaskedView
+            style={[StyleSheet.absoluteFillObject]}
+            maskElement={
+              <Animated.View
+                style={[
+                  {
+                    // Transparent background because mask is based off alpha channel.
+                    backgroundColor: 'transparent',
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
+                  },
+                ]}>
+                <AnimatedLogo fill="#fff" style={[logoAnimations]} />
+              </Animated.View>
+            }>
+            {!isAnimationComplete && (
+              <View
+                style={[
+                  StyleSheet.absoluteFillObject,
+                  {backgroundColor: '#fff'},
+                ]}
+              />
+            )}
+            <Animated.View style={[{flex: 1}, appAnimation]}>
+              {props.children}
+            </Animated.View>
+          </MaskedView>
+        ))}
    </View>
  )
 }
@@ -0,0 +1,56 @@
+# Application Layout Framework (ALF)
+
+A set of UI primitives and components.
+
+## Usage
+
+Naming conventions follow Tailwind — delimited with a `_` instead of `-` to
+enable object access — with a couple exceptions:
+
+**Spacing**
+
+Uses "t-shirt" sizes `xxs`, `xs`, `sm`, `md`, `lg`, `xl` and `xxl` instead of
+increments of 4px. We only use a few common spacings, and otherwise typically
+rely on many one-off values.
+
+**Text Size**
+
+Uses "t-shirt" sizes `xxs`, `xs`, `sm`, `md`, `lg`, `xl` and `xxl` to match our
+type scale.
+
+**Line Height**
+
+The text size atoms also apply a line-height with the same value as the size,
+for a 1:1 ratio. `tight` and `normal` are retained for use in the few places
+where we need leading.
+
+### Atoms
+
+An (mostly-complete) set of style definitions that match Tailwind CSS selectors.
+These are static and reused throughout the app.
+
+```tsx
+import { atoms } from '#/alf'
+
+<View style={[atoms.flex_row]} />
+```
+
+### Theme
+
+Any values that rely on the theme, namely colors.
+
+```tsx
+const t = useTheme()
+
+<View style={[atoms.flex_row, t.atoms.bg]} />
+```
+
+### Breakpoints
+
+```tsx
+const b = useBreakpoints()
+
+if (b.gtMobile) {
+  // render tablet or desktop UI
+}
+```
@@ -0,0 +1,698 @@
+import * as tokens from '#/alf/tokens'
+
+export const atoms = {
+  /*
+   * Positioning
+   */
+  fixed: {
+    position: 'fixed',
+  },
+  absolute: {
+    position: 'absolute',
+  },
+  relative: {
+    position: 'relative',
+  },
+  inset_0: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  z_10: {
+    zIndex: 10,
+  },
+  z_20: {
+    zIndex: 20,
+  },
+  z_30: {
+    zIndex: 30,
+  },
+  z_40: {
+    zIndex: 40,
+  },
+  z_50: {
+    zIndex: 50,
+  },
+
+  overflow_hidden: {
+    overflow: 'hidden',
+  },
+
+  /*
+   * Width
+   */
+  w_full: {
+    width: '100%',
+  },
+  h_full: {
+    height: '100%',
+  },
+
+  /*
+   * Border radius
+   */
+  rounded_2xs: {
+    borderRadius: tokens.borderRadius._2xs,
+  },
+  rounded_xs: {
+    borderRadius: tokens.borderRadius.xs,
+  },
+  rounded_sm: {
+    borderRadius: tokens.borderRadius.sm,
+  },
+  rounded_md: {
+    borderRadius: tokens.borderRadius.md,
+  },
+  rounded_full: {
+    borderRadius: tokens.borderRadius.full,
+  },
+
+  /*
+   * Flex
+   */
+  gap_2xs: {
+    gap: tokens.space._2xs,
+  },
+  gap_xs: {
+    gap: tokens.space.xs,
+  },
+  gap_sm: {
+    gap: tokens.space.sm,
+  },
+  gap_md: {
+    gap: tokens.space.md,
+  },
+  gap_lg: {
+    gap: tokens.space.lg,
+  },
+  gap_xl: {
+    gap: tokens.space.xl,
+  },
+  gap_2xl: {
+    gap: tokens.space._2xl,
+  },
+  gap_3xl: {
+    gap: tokens.space._3xl,
+  },
+  gap_4xl: {
+    gap: tokens.space._4xl,
+  },
+  gap_5xl: {
+    gap: tokens.space._5xl,
+  },
+  flex: {
+    display: 'flex',
+  },
+  flex_col: {
+    flexDirection: 'column',
+  },
+  flex_row: {
+    flexDirection: 'row',
+  },
+  flex_wrap: {
+    flexWrap: 'wrap',
+  },
+  flex_1: {
+    flex: 1,
+  },
+  flex_grow: {
+    flexGrow: 1,
+  },
+  flex_shrink: {
+    flexShrink: 1,
+  },
+  justify_center: {
+    justifyContent: 'center',
+  },
+  justify_between: {
+    justifyContent: 'space-between',
+  },
+  justify_end: {
+    justifyContent: 'flex-end',
+  },
+  align_center: {
+    alignItems: 'center',
+  },
+  align_start: {
+    alignItems: 'flex-start',
+  },
+  align_end: {
+    alignItems: 'flex-end',
+  },
+
+  /*
+   * Text
+   */
+  text_center: {
+    textAlign: 'center',
+  },
+  text_right: {
+    textAlign: 'right',
+  },
+  text_2xs: {
+    fontSize: tokens.fontSize._2xs,
+  },
+  text_xs: {
+    fontSize: tokens.fontSize.xs,
+  },
+  text_sm: {
+    fontSize: tokens.fontSize.sm,
+  },
+  text_md: {
+    fontSize: tokens.fontSize.md,
+  },
+  text_lg: {
+    fontSize: tokens.fontSize.lg,
+  },
+  text_xl: {
+    fontSize: tokens.fontSize.xl,
+  },
+  text_2xl: {
+    fontSize: tokens.fontSize._2xl,
+  },
+  text_3xl: {
+    fontSize: tokens.fontSize._3xl,
+  },
+  text_4xl: {
+    fontSize: tokens.fontSize._4xl,
+  },
+  text_5xl: {
+    fontSize: tokens.fontSize._5xl,
+  },
+  leading_tight: {
+    lineHeight: 1.15,
+  },
+  leading_snug: {
+    lineHeight: 1.25,
+  },
+  leading_normal: {
+    lineHeight: 1.5,
+  },
+  font_normal: {
+    fontWeight: tokens.fontWeight.normal,
+  },
+  font_bold: {
+    fontWeight: tokens.fontWeight.semibold,
+  },
+
+  /*
+   * Border
+   */
+  border: {
+    borderWidth: 1,
+  },
+  border_t: {
+    borderTopWidth: 1,
+  },
+  border_b: {
+    borderBottomWidth: 1,
+  },
+
+  /*
+   * Shadow
+   */
+  shadow_sm: {
+    shadowRadius: 8,
+    shadowOpacity: 0.1,
+    elevation: 8,
+  },
+  shadow_md: {
+    shadowRadius: 16,
+    shadowOpacity: 0.1,
+    elevation: 16,
+  },
+  shadow_lg: {
+    shadowRadius: 32,
+    shadowOpacity: 0.1,
+    elevation: 24,
+  },
+
+  /*
+   * Padding
+   */
+  p_2xs: {
+    padding: tokens.space._2xs,
+  },
+  p_xs: {
+    padding: tokens.space.xs,
+  },
+  p_sm: {
+    padding: tokens.space.sm,
+  },
+  p_md: {
+    padding: tokens.space.md,
+  },
+  p_lg: {
+    padding: tokens.space.lg,
+  },
+  p_xl: {
+    padding: tokens.space.xl,
+  },
+  p_2xl: {
+    padding: tokens.space._2xl,
+  },
+  p_3xl: {
+    padding: tokens.space._3xl,
+  },
+  p_4xl: {
+    padding: tokens.space._4xl,
+  },
+  p_5xl: {
+    padding: tokens.space._5xl,
+  },
+  px_2xs: {
+    paddingLeft: tokens.space._2xs,
+    paddingRight: tokens.space._2xs,
+  },
+  px_xs: {
+    paddingLeft: tokens.space.xs,
+    paddingRight: tokens.space.xs,
+  },
+  px_sm: {
+    paddingLeft: tokens.space.sm,
+    paddingRight: tokens.space.sm,
+  },
+  px_md: {
+    paddingLeft: tokens.space.md,
+    paddingRight: tokens.space.md,
+  },
+  px_lg: {
+    paddingLeft: tokens.space.lg,
+    paddingRight: tokens.space.lg,
+  },
+  px_xl: {
+    paddingLeft: tokens.space.xl,
+    paddingRight: tokens.space.xl,
+  },
+  px_2xl: {
+    paddingLeft: tokens.space._2xl,
+    paddingRight: tokens.space._2xl,
+  },
+  px_3xl: {
+    paddingLeft: tokens.space._3xl,
+    paddingRight: tokens.space._3xl,
+  },
+  px_4xl: {
+    paddingLeft: tokens.space._4xl,
+    paddingRight: tokens.space._4xl,
+  },
+  px_5xl: {
+    paddingLeft: tokens.space._5xl,
+    paddingRight: tokens.space._5xl,
+  },
+  py_2xs: {
+    paddingTop: tokens.space._2xs,
+    paddingBottom: tokens.space._2xs,
+  },
+  py_xs: {
+    paddingTop: tokens.space.xs,
+    paddingBottom: tokens.space.xs,
+  },
+  py_sm: {
+    paddingTop: tokens.space.sm,
+    paddingBottom: tokens.space.sm,
+  },
+  py_md: {
+    paddingTop: tokens.space.md,
+    paddingBottom: tokens.space.md,
+  },
+  py_lg: {
+    paddingTop: tokens.space.lg,
+    paddingBottom: tokens.space.lg,
+  },
+  py_xl: {
+    paddingTop: tokens.space.xl,
+    paddingBottom: tokens.space.xl,
+  },
+  py_2xl: {
+    paddingTop: tokens.space._2xl,
+    paddingBottom: tokens.space._2xl,
+  },
+  py_3xl: {
+    paddingTop: tokens.space._3xl,
+    paddingBottom: tokens.space._3xl,
+  },
+  py_4xl: {
+    paddingTop: tokens.space._4xl,
+    paddingBottom: tokens.space._4xl,
+  },
+  py_5xl: {
+    paddingTop: tokens.space._5xl,
+    paddingBottom: tokens.space._5xl,
+  },
+  pt_2xs: {
+    paddingTop: tokens.space._2xs,
+  },
+  pt_xs: {
+    paddingTop: tokens.space.xs,
+  },
+  pt_sm: {
+    paddingTop: tokens.space.sm,
+  },
+  pt_md: {
+    paddingTop: tokens.space.md,
+  },
+  pt_lg: {
+    paddingTop: tokens.space.lg,
+  },
+  pt_xl: {
+    paddingTop: tokens.space.xl,
+  },
+  pt_2xl: {
+    paddingTop: tokens.space._2xl,
+  },
+  pt_3xl: {
+    paddingTop: tokens.space._3xl,
+  },
+  pt_4xl: {
+    paddingTop: tokens.space._4xl,
+  },
+  pt_5xl: {
+    paddingTop: tokens.space._5xl,
+  },
+  pb_2xs: {
+    paddingBottom: tokens.space._2xs,
+  },
+  pb_xs: {
+    paddingBottom: tokens.space.xs,
+  },
+  pb_sm: {
+    paddingBottom: tokens.space.sm,
+  },
+  pb_md: {
+    paddingBottom: tokens.space.md,
+  },
+  pb_lg: {
+    paddingBottom: tokens.space.lg,
+  },
+  pb_xl: {
+    paddingBottom: tokens.space.xl,
+  },
+  pb_2xl: {
+    paddingBottom: tokens.space._2xl,
+  },
+  pb_3xl: {
+    paddingBottom: tokens.space._3xl,
+  },
+  pb_4xl: {
+    paddingBottom: tokens.space._4xl,
+  },
+  pb_5xl: {
+    paddingBottom: tokens.space._5xl,
+  },
+  pl_2xs: {
+    paddingLeft: tokens.space._2xs,
+  },
+  pl_xs: {
+    paddingLeft: tokens.space.xs,
+  },
+  pl_sm: {
+    paddingLeft: tokens.space.sm,
+  },
+  pl_md: {
+    paddingLeft: tokens.space.md,
+  },
+  pl_lg: {
+    paddingLeft: tokens.space.lg,
+  },
+  pl_xl: {
+    paddingLeft: tokens.space.xl,
+  },
+  pl_2xl: {
+    paddingLeft: tokens.space._2xl,
+  },
+  pl_3xl: {
+    paddingLeft: tokens.space._3xl,
+  },
+  pl_4xl: {
+    paddingLeft: tokens.space._4xl,
+  },
+  pl_5xl: {
+    paddingLeft: tokens.space._5xl,
+  },
+  pr_2xs: {
+    paddingRight: tokens.space._2xs,
+  },
+  pr_xs: {
+    paddingRight: tokens.space.xs,
+  },
+  pr_sm: {
+    paddingRight: tokens.space.sm,
+  },
+  pr_md: {
+    paddingRight: tokens.space.md,
+  },
+  pr_lg: {
+    paddingRight: tokens.space.lg,
+  },
+  pr_xl: {
+    paddingRight: tokens.space.xl,
+  },
+  pr_2xl: {
+    paddingRight: tokens.space._2xl,
+  },
+  pr_3xl: {
+    paddingRight: tokens.space._3xl,
+  },
+  pr_4xl: {
+    paddingRight: tokens.space._4xl,
+  },
+  pr_5xl: {
+    paddingRight: tokens.space._5xl,
+  },
+
+  /*
+   * Margin
+   */
+  m_2xs: {
+    margin: tokens.space._2xs,
+  },
+  m_xs: {
+    margin: tokens.space.xs,
+  },
+  m_sm: {
+    margin: tokens.space.sm,
+  },
+  m_md: {
+    margin: tokens.space.md,
+  },
+  m_lg: {
+    margin: tokens.space.lg,
+  },
+  m_xl: {
+    margin: tokens.space.xl,
+  },
+  m_2xl: {
+    margin: tokens.space._2xl,
+  },
+  m_3xl: {
+    margin: tokens.space._3xl,
+  },
+  m_4xl: {
+    margin: tokens.space._4xl,
+  },
+  m_5xl: {
+    margin: tokens.space._5xl,
+  },
+  mx_2xs: {
+    marginLeft: tokens.space._2xs,
+    marginRight: tokens.space._2xs,
+  },
+  mx_xs: {
+    marginLeft: tokens.space.xs,
+    marginRight: tokens.space.xs,
+  },
+  mx_sm: {
+    marginLeft: tokens.space.sm,
+    marginRight: tokens.space.sm,
+  },
+  mx_md: {
+    marginLeft: tokens.space.md,
+    marginRight: tokens.space.md,
+  },
+  mx_lg: {
+    marginLeft: tokens.space.lg,
+    marginRight: tokens.space.lg,
+  },
+  mx_xl: {
+    marginLeft: tokens.space.xl,
+    marginRight: tokens.space.xl,
+  },
+  mx_2xl: {
+    marginLeft: tokens.space._2xl,
+    marginRight: tokens.space._2xl,
+  },
+  mx_3xl: {
+    marginLeft: tokens.space._3xl,
+    marginRight: tokens.space._3xl,
+  },
+  mx_4xl: {
+    marginLeft: tokens.space._4xl,
+    marginRight: tokens.space._4xl,
+  },
+  mx_5xl: {
+    marginLeft: tokens.space._5xl,
+    marginRight: tokens.space._5xl,
+  },
+  my_2xs: {
+    marginTop: tokens.space._2xs,
+    marginBottom: tokens.space._2xs,
+  },
+  my_xs: {
+    marginTop: tokens.space.xs,
+    marginBottom: tokens.space.xs,
+  },
+  my_sm: {
+    marginTop: tokens.space.sm,
+    marginBottom: tokens.space.sm,
+  },
+  my_md: {
+    marginTop: tokens.space.md,
+    marginBottom: tokens.space.md,
+  },
+  my_lg: {
+    marginTop: tokens.space.lg,
+    marginBottom: tokens.space.lg,
+  },
+  my_xl: {
+    marginTop: tokens.space.xl,
+    marginBottom: tokens.space.xl,
+  },
+  my_2xl: {
+    marginTop: tokens.space._2xl,
+    marginBottom: tokens.space._2xl,
+  },
+  my_3xl: {
+    marginTop: tokens.space._3xl,
+    marginBottom: tokens.space._3xl,
+  },
+  my_4xl: {
+    marginTop: tokens.space._4xl,
+    marginBottom: tokens.space._4xl,
+  },
+  my_5xl: {
+    marginTop: tokens.space._5xl,
+    marginBottom: tokens.space._5xl,
+  },
+  mt_2xs: {
+    marginTop: tokens.space._2xs,
+  },
+  mt_xs: {
+    marginTop: tokens.space.xs,
+  },
+  mt_sm: {
+    marginTop: tokens.space.sm,
+  },
+  mt_md: {
+    marginTop: tokens.space.md,
+  },
+  mt_lg: {
+    marginTop: tokens.space.lg,
+  },
+  mt_xl: {
+    marginTop: tokens.space.xl,
+  },
+  mt_2xl: {
+    marginTop: tokens.space._2xl,
+  },
+  mt_3xl: {
+    marginTop: tokens.space._3xl,
+  },
+  mt_4xl: {
+    marginTop: tokens.space._4xl,
+  },
+  mt_5xl: {
+    marginTop: tokens.space._5xl,
+  },
+  mb_2xs: {
+    marginBottom: tokens.space._2xs,
+  },
+  mb_xs: {
+    marginBottom: tokens.space.xs,
+  },
+  mb_sm: {
+    marginBottom: tokens.space.sm,
+  },
+  mb_md: {
+    marginBottom: tokens.space.md,
+  },
+  mb_lg: {
+    marginBottom: tokens.space.lg,
+  },
+  mb_xl: {
+    marginBottom: tokens.space.xl,
+  },
+  mb_2xl: {
+    marginBottom: tokens.space._2xl,
+  },
+  mb_3xl: {
+    marginBottom: tokens.space._3xl,
+  },
+  mb_4xl: {
+    marginBottom: tokens.space._4xl,
+  },
+  mb_5xl: {
+    marginBottom: tokens.space._5xl,
+  },
+  ml_2xs: {
+    marginLeft: tokens.space._2xs,
+  },
+  ml_xs: {
+    marginLeft: tokens.space.xs,
+  },
+  ml_sm: {
+    marginLeft: tokens.space.sm,
+  },
+  ml_md: {
+    marginLeft: tokens.space.md,
+  },
+  ml_lg: {
+    marginLeft: tokens.space.lg,
+  },
+  ml_xl: {
+    marginLeft: tokens.space.xl,
+  },
+  ml_2xl: {
+    marginLeft: tokens.space._2xl,
+  },
+  ml_3xl: {
+    marginLeft: tokens.space._3xl,
+  },
+  ml_4xl: {
+    marginLeft: tokens.space._4xl,
+  },
+  ml_5xl: {
+    marginLeft: tokens.space._5xl,
+  },
+  mr_2xs: {
+    marginRight: tokens.space._2xs,
+  },
+  mr_xs: {
+    marginRight: tokens.space.xs,
+  },
+  mr_sm: {
+    marginRight: tokens.space.sm,
+  },
+  mr_md: {
+    marginRight: tokens.space.md,
+  },
+  mr_lg: {
+    marginRight: tokens.space.lg,
+  },
+  mr_xl: {
+    marginRight: tokens.space.xl,
+  },
+  mr_2xl: {
+    marginRight: tokens.space._2xl,
+  },
+  mr_3xl: {
+    marginRight: tokens.space._3xl,
+  },
+  mr_4xl: {
+    marginRight: tokens.space._4xl,
+  },
+  mr_5xl: {
+    marginRight: tokens.space._5xl,
+  },
+} as const
@@ -0,0 +1,94 @@
+import React from 'react'
+import {Dimensions} from 'react-native'
+import * as themes from '#/alf/themes'
+
+export * from '#/alf/types'
+export * as tokens from '#/alf/tokens'
+export {atoms} from '#/alf/atoms'
+export * from '#/alf/util/platform'
+export * from '#/alf/util/flatten'
+
+type BreakpointName = keyof typeof breakpoints
+
+/*
+ * Breakpoints
+ */
+const breakpoints: {
+  [key: string]: number
+} = {
+  gtMobile: 800,
+  gtTablet: 1200,
+}
+function getActiveBreakpoints({width}: {width: number}) {
+  const active: (keyof typeof breakpoints)[] = Object.keys(breakpoints).filter(
+    breakpoint => width >= breakpoints[breakpoint],
+  )
+
+  return {
+    active: active[active.length - 1],
+    gtMobile: active.includes('gtMobile'),
+    gtTablet: active.includes('gtTablet'),
+  }
+}
+
+/*
+ * Context
+ */
+export const Context = React.createContext<{
+  themeName: themes.ThemeName
+  theme: themes.Theme
+  breakpoints: {
+    active: BreakpointName | undefined
+    gtMobile: boolean
+    gtTablet: boolean
+  }
+}>({
+  themeName: 'light',
+  theme: themes.light,
+  breakpoints: {
+    active: undefined,
+    gtMobile: false,
+    gtTablet: false,
+  },
+})
+
+export function ThemeProvider({
+  children,
+  theme: themeName,
+}: React.PropsWithChildren<{theme: themes.ThemeName}>) {
+  const theme = themes[themeName]
+  const [breakpoints, setBreakpoints] = React.useState(() =>
+    getActiveBreakpoints({width: Dimensions.get('window').width}),
+  )
+
+  React.useEffect(() => {
+    const listener = Dimensions.addEventListener('change', ({window}) => {
+      const bp = getActiveBreakpoints({width: window.width})
+      if (bp.active !== breakpoints.active) setBreakpoints(bp)
+    })
+
+    return listener.remove
+  }, [breakpoints, setBreakpoints])
+
+  return (
+    <Context.Provider
+      value={React.useMemo(
+        () => ({
+          themeName: themeName,
+          theme: theme,
+          breakpoints,
+        }),
+        [theme, themeName, breakpoints],
+      )}>
+      {children}
+    </Context.Provider>
+  )
+}
+
+export function useTheme() {
+  return React.useContext(Context).theme
+}
+
+export function useBreakpoints() {
+  return React.useContext(Context).breakpoints
+}
@@ -0,0 +1,397 @@
+import * as tokens from '#/alf/tokens'
+import type {Mutable} from '#/alf/types'
+import {atoms} from '#/alf/atoms'
+
+export type ThemeName = 'light' | 'dim' | 'dark'
+export type ReadonlyTheme = typeof light
+export type Theme = Mutable<ReadonlyTheme>
+export type ReadonlyPalette = typeof lightPalette
+export type Palette = Mutable<ReadonlyPalette>
+
+export const lightPalette = {
+  white: tokens.color.gray_0,
+  black: tokens.color.gray_1000,
+
+  contrast_25: tokens.color.gray_25,
+  contrast_50: tokens.color.gray_50,
+  contrast_100: tokens.color.gray_100,
+  contrast_200: tokens.color.gray_200,
+  contrast_300: tokens.color.gray_300,
+  contrast_400: tokens.color.gray_400,
+  contrast_500: tokens.color.gray_500,
+  contrast_600: tokens.color.gray_600,
+  contrast_700: tokens.color.gray_700,
+  contrast_800: tokens.color.gray_800,
+  contrast_900: tokens.color.gray_900,
+  contrast_950: tokens.color.gray_950,
+  contrast_975: tokens.color.gray_975,
+
+  primary_25: tokens.color.blue_25,
+  primary_50: tokens.color.blue_50,
+  primary_100: tokens.color.blue_100,
+  primary_200: tokens.color.blue_200,
+  primary_300: tokens.color.blue_300,
+  primary_400: tokens.color.blue_400,
+  primary_500: tokens.color.blue_500,
+  primary_600: tokens.color.blue_600,
+  primary_700: tokens.color.blue_700,
+  primary_800: tokens.color.blue_800,
+  primary_900: tokens.color.blue_900,
+  primary_950: tokens.color.blue_950,
+  primary_975: tokens.color.blue_975,
+
+  positive_25: tokens.color.green_25,
+  positive_50: tokens.color.green_50,
+  positive_100: tokens.color.green_100,
+  positive_200: tokens.color.green_200,
+  positive_300: tokens.color.green_300,
+  positive_400: tokens.color.green_400,
+  positive_500: tokens.color.green_500,
+  positive_600: tokens.color.green_600,
+  positive_700: tokens.color.green_700,
+  positive_800: tokens.color.green_800,
+  positive_900: tokens.color.green_900,
+  positive_950: tokens.color.green_950,
+  positive_975: tokens.color.green_975,
+
+  negative_25: tokens.color.red_25,
+  negative_50: tokens.color.red_50,
+  negative_100: tokens.color.red_100,
+  negative_200: tokens.color.red_200,
+  negative_300: tokens.color.red_300,
+  negative_400: tokens.color.red_400,
+  negative_500: tokens.color.red_500,
+  negative_600: tokens.color.red_600,
+  negative_700: tokens.color.red_700,
+  negative_800: tokens.color.red_800,
+  negative_900: tokens.color.red_900,
+  negative_950: tokens.color.red_950,
+  negative_975: tokens.color.red_975,
+} as const
+
+export const darkPalette: Palette = {
+  white: tokens.color.gray_0,
+  black: tokens.color.trueBlack,
+
+  contrast_25: tokens.color.gray_1000,
+  contrast_50: tokens.color.gray_975,
+  contrast_100: tokens.color.gray_950,
+  contrast_200: tokens.color.gray_900,
+  contrast_300: tokens.color.gray_800,
+  contrast_400: tokens.color.gray_700,
+  contrast_500: tokens.color.gray_600,
+  contrast_600: tokens.color.gray_500,
+  contrast_700: tokens.color.gray_400,
+  contrast_800: tokens.color.gray_300,
+  contrast_900: tokens.color.gray_200,
+  contrast_950: tokens.color.gray_100,
+  contrast_975: tokens.color.gray_50,
+
+  primary_25: tokens.color.blue_25,
+  primary_50: tokens.color.blue_50,
+  primary_100: tokens.color.blue_100,
+  primary_200: tokens.color.blue_200,
+  primary_300: tokens.color.blue_300,
+  primary_400: tokens.color.blue_400,
+  primary_500: tokens.color.blue_500,
+  primary_600: tokens.color.blue_600,
+  primary_700: tokens.color.blue_700,
+  primary_800: tokens.color.blue_800,
+  primary_900: tokens.color.blue_900,
+  primary_950: tokens.color.blue_950,
+  primary_975: tokens.color.blue_975,
+
+  positive_25: tokens.color.green_25,
+  positive_50: tokens.color.green_50,
+  positive_100: tokens.color.green_100,
+  positive_200: tokens.color.green_200,
+  positive_300: tokens.color.green_300,
+  positive_400: tokens.color.green_400,
+  positive_500: tokens.color.green_500,
+  positive_600: tokens.color.green_600,
+  positive_700: tokens.color.green_700,
+  positive_800: tokens.color.green_800,
+  positive_900: tokens.color.green_900,
+  positive_950: tokens.color.green_950,
+  positive_975: tokens.color.green_975,
+
+  negative_25: tokens.color.red_25,
+  negative_50: tokens.color.red_50,
+  negative_100: tokens.color.red_100,
+  negative_200: tokens.color.red_200,
+  negative_300: tokens.color.red_300,
+  negative_400: tokens.color.red_400,
+  negative_500: tokens.color.red_500,
+  negative_600: tokens.color.red_600,
+  negative_700: tokens.color.red_700,
+  negative_800: tokens.color.red_800,
+  negative_900: tokens.color.red_900,
+  negative_950: tokens.color.red_950,
+  negative_975: tokens.color.red_975,
+} as const
+
+export const dimPalette: Palette = {
+  ...darkPalette,
+  black: tokens.color.gray_1000,
+
+  contrast_25: tokens.color.gray_975,
+  contrast_50: tokens.color.gray_950,
+  contrast_100: tokens.color.gray_900,
+  contrast_200: tokens.color.gray_800,
+  contrast_300: tokens.color.gray_700,
+  contrast_400: tokens.color.gray_600,
+  contrast_500: tokens.color.gray_500,
+  contrast_600: tokens.color.gray_400,
+  contrast_700: tokens.color.gray_300,
+  contrast_800: tokens.color.gray_200,
+  contrast_900: tokens.color.gray_100,
+  contrast_950: tokens.color.gray_50,
+  contrast_975: tokens.color.gray_25,
+} as const
+
+export const light = {
+  name: 'light',
+  palette: lightPalette,
+  atoms: {
+    text: {
+      color: lightPalette.black,
+    },
+    text_contrast_low: {
+      color: lightPalette.contrast_400,
+    },
+    text_contrast_medium: {
+      color: lightPalette.contrast_700,
+    },
+    text_contrast_high: {
+      color: lightPalette.contrast_900,
+    },
+    text_inverted: {
+      color: lightPalette.white,
+    },
+    bg: {
+      backgroundColor: lightPalette.white,
+    },
+    bg_contrast_25: {
+      backgroundColor: lightPalette.contrast_25,
+    },
+    bg_contrast_50: {
+      backgroundColor: lightPalette.contrast_50,
+    },
+    bg_contrast_100: {
+      backgroundColor: lightPalette.contrast_100,
+    },
+    bg_contrast_200: {
+      backgroundColor: lightPalette.contrast_200,
+    },
+    bg_contrast_300: {
+      backgroundColor: lightPalette.contrast_300,
+    },
+    bg_contrast_400: {
+      backgroundColor: lightPalette.contrast_400,
+    },
+    bg_contrast_500: {
+      backgroundColor: lightPalette.contrast_500,
+    },
+    bg_contrast_600: {
+      backgroundColor: lightPalette.contrast_600,
+    },
+    bg_contrast_700: {
+      backgroundColor: lightPalette.contrast_700,
+    },
+    bg_contrast_800: {
+      backgroundColor: lightPalette.contrast_800,
+    },
+    bg_contrast_900: {
+      backgroundColor: lightPalette.contrast_900,
+    },
+    bg_contrast_950: {
+      backgroundColor: lightPalette.contrast_950,
+    },
+    bg_contrast_975: {
+      backgroundColor: lightPalette.contrast_975,
+    },
+    border_contrast_low: {
+      borderColor: lightPalette.contrast_100,
+    },
+    border_contrast_medium: {
+      borderColor: lightPalette.contrast_200,
+    },
+    border_contrast_high: {
+      borderColor: lightPalette.contrast_300,
+    },
+    shadow_sm: {
+      ...atoms.shadow_sm,
+      shadowColor: lightPalette.black,
+    },
+    shadow_md: {
+      ...atoms.shadow_md,
+      shadowColor: lightPalette.black,
+    },
+    shadow_lg: {
+      ...atoms.shadow_lg,
+      shadowColor: lightPalette.black,
+    },
+  },
+}
+
+export const dark: Theme = {
+  name: 'dark',
+  palette: darkPalette,
+  atoms: {
+    text: {
+      color: darkPalette.white,
+    },
+    text_contrast_low: {
+      color: darkPalette.contrast_400,
+    },
+    text_contrast_medium: {
+      color: darkPalette.contrast_700,
+    },
+    text_contrast_high: {
+      color: darkPalette.contrast_900,
+    },
+    text_inverted: {
+      color: darkPalette.black,
+    },
+    bg: {
+      backgroundColor: darkPalette.black,
+    },
+    bg_contrast_25: {
+      backgroundColor: darkPalette.contrast_25,
+    },
+    bg_contrast_50: {
+      backgroundColor: darkPalette.contrast_50,
+    },
+    bg_contrast_100: {
+      backgroundColor: darkPalette.contrast_100,
+    },
+    bg_contrast_200: {
+      backgroundColor: darkPalette.contrast_200,
+    },
+    bg_contrast_300: {
+      backgroundColor: darkPalette.contrast_300,
+    },
+    bg_contrast_400: {
+      backgroundColor: darkPalette.contrast_400,
+    },
+    bg_contrast_500: {
+      backgroundColor: darkPalette.contrast_500,
+    },
+    bg_contrast_600: {
+      backgroundColor: darkPalette.contrast_600,
+    },
+    bg_contrast_700: {
+      backgroundColor: darkPalette.contrast_700,
+    },
+    bg_contrast_800: {
+      backgroundColor: darkPalette.contrast_800,
+    },
+    bg_contrast_900: {
+      backgroundColor: darkPalette.contrast_900,
+    },
+    bg_contrast_950: {
+      backgroundColor: darkPalette.contrast_950,
+    },
+    bg_contrast_975: {
+      backgroundColor: darkPalette.contrast_975,
+    },
+    border_contrast_low: {
+      borderColor: darkPalette.contrast_100,
+    },
+    border_contrast_medium: {
+      borderColor: darkPalette.contrast_200,
+    },
+    border_contrast_high: {
+      borderColor: darkPalette.contrast_300,
+    },
+    shadow_sm: {
+      ...atoms.shadow_sm,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+    shadow_md: {
+      ...atoms.shadow_md,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+    shadow_lg: {
+      ...atoms.shadow_lg,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+  },
+}
+
+export const dim: Theme = {
+  ...dark,
+  name: 'dim',
+  atoms: {
+    ...dark.atoms,
+    text: {
+      color: dimPalette.white,
+    },
+    text_contrast_low: {
+      color: dimPalette.contrast_400,
+    },
+    text_contrast_medium: {
+      color: dimPalette.contrast_700,
+    },
+    text_contrast_high: {
+      color: dimPalette.contrast_900,
+    },
+    text_inverted: {
+      color: dimPalette.black,
+    },
+    bg: {
+      backgroundColor: dimPalette.black,
+    },
+    bg_contrast_25: {
+      backgroundColor: dimPalette.contrast_25,
+    },
+    bg_contrast_50: {
+      backgroundColor: dimPalette.contrast_50,
+    },
+    bg_contrast_100: {
+      backgroundColor: dimPalette.contrast_100,
+    },
+    bg_contrast_200: {
+      backgroundColor: dimPalette.contrast_200,
+    },
+    bg_contrast_300: {
+      backgroundColor: dimPalette.contrast_300,
+    },
+    bg_contrast_400: {
+      backgroundColor: dimPalette.contrast_400,
+    },
+    bg_contrast_500: {
+      backgroundColor: dimPalette.contrast_500,
+    },
+    bg_contrast_600: {
+      backgroundColor: dimPalette.contrast_600,
+    },
+    bg_contrast_700: {
+      backgroundColor: dimPalette.contrast_700,
+    },
+    bg_contrast_800: {
+      backgroundColor: dimPalette.contrast_800,
+    },
+    bg_contrast_900: {
+      backgroundColor: dimPalette.contrast_900,
+    },
+    bg_contrast_950: {
+      backgroundColor: dimPalette.contrast_950,
+    },
+    bg_contrast_975: {
+      backgroundColor: dimPalette.contrast_975,
+    },
+    border_contrast_low: {
+      borderColor: dimPalette.contrast_100,
+    },
+    border_contrast_medium: {
+      borderColor: dimPalette.contrast_200,
+    },
+    border_contrast_high: {
+      borderColor: dimPalette.contrast_300,
+    },
+  },
+}
@@ -0,0 +1,176 @@
+const BLUE_HUE = 211
+const RED_HUE = 346
+const GREEN_HUE = 152
+
+export const color = {
+  trueBlack: '#000000',
+
+  gray_0: `hsl(${BLUE_HUE}, 20%, 100%)`,
+  gray_25: `hsl(${BLUE_HUE}, 20%, 97%)`,
+  gray_50: `hsl(${BLUE_HUE}, 20%, 95%)`,
+  gray_100: `hsl(${BLUE_HUE}, 20%, 90%)`,
+  gray_200: `hsl(${BLUE_HUE}, 20%, 80%)`,
+  gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`,
+  gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`,
+  gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`,
+  gray_600: `hsl(${BLUE_HUE}, 24%, 42%)`,
+  gray_700: `hsl(${BLUE_HUE}, 24%, 34%)`,
+  gray_800: `hsl(${BLUE_HUE}, 28%, 26%)`,
+  gray_900: `hsl(${BLUE_HUE}, 28%, 18%)`,
+  gray_950: `hsl(${BLUE_HUE}, 28%, 10%)`,
+  gray_975: `hsl(${BLUE_HUE}, 28%, 7%)`,
+  gray_1000: `hsl(${BLUE_HUE}, 28%, 4%)`,
+
+  blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`,
+  blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,
+  blue_100: `hsl(${BLUE_HUE}, 99%, 90%)`,
+  blue_200: `hsl(${BLUE_HUE}, 99%, 80%)`,
+  blue_300: `hsl(${BLUE_HUE}, 99%, 70%)`,
+  blue_400: `hsl(${BLUE_HUE}, 99%, 60%)`,
+  blue_500: `hsl(${BLUE_HUE}, 99%, 53%)`,
+  blue_600: `hsl(${BLUE_HUE}, 99%, 42%)`,
+  blue_700: `hsl(${BLUE_HUE}, 99%, 34%)`,
+  blue_800: `hsl(${BLUE_HUE}, 99%, 26%)`,
+  blue_900: `hsl(${BLUE_HUE}, 99%, 18%)`,
+  blue_950: `hsl(${BLUE_HUE}, 99%, 10%)`,
+  blue_975: `hsl(${BLUE_HUE}, 99%, 7%)`,
+
+  green_25: `hsl(${GREEN_HUE}, 82%, 97%)`,
+  green_50: `hsl(${GREEN_HUE}, 82%, 95%)`,
+  green_100: `hsl(${GREEN_HUE}, 82%, 90%)`,
+  green_200: `hsl(${GREEN_HUE}, 82%, 80%)`,
+  green_300: `hsl(${GREEN_HUE}, 82%, 70%)`,
+  green_400: `hsl(${GREEN_HUE}, 82%, 60%)`,
+  green_500: `hsl(${GREEN_HUE}, 82%, 50%)`,
+  green_600: `hsl(${GREEN_HUE}, 82%, 42%)`,
+  green_700: `hsl(${GREEN_HUE}, 82%, 34%)`,
+  green_800: `hsl(${GREEN_HUE}, 82%, 26%)`,
+  green_900: `hsl(${GREEN_HUE}, 82%, 18%)`,
+  green_950: `hsl(${GREEN_HUE}, 82%, 10%)`,
+  green_975: `hsl(${GREEN_HUE}, 82%, 7%)`,
+
+  red_25: `hsl(${RED_HUE}, 91%, 97%)`,
+  red_50: `hsl(${RED_HUE}, 91%, 95%)`,
+  red_100: `hsl(${RED_HUE}, 91%, 90%)`,
+  red_200: `hsl(${RED_HUE}, 91%, 80%)`,
+  red_300: `hsl(${RED_HUE}, 91%, 70%)`,
+  red_400: `hsl(${RED_HUE}, 91%, 60%)`,
+  red_500: `hsl(${RED_HUE}, 91%, 50%)`,
+  red_600: `hsl(${RED_HUE}, 91%, 42%)`,
+  red_700: `hsl(${RED_HUE}, 91%, 34%)`,
+  red_800: `hsl(${RED_HUE}, 91%, 26%)`,
+  red_900: `hsl(${RED_HUE}, 91%, 18%)`,
+  red_950: `hsl(${RED_HUE}, 91%, 10%)`,
+  red_975: `hsl(${RED_HUE}, 91%, 7%)`,
+} as const
+
+export const space = {
+  _2xs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  _2xl: 24,
+  _3xl: 28,
+  _4xl: 32,
+  _5xl: 40,
+} as const
+
+export const fontSize = {
+  _2xs: 10,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  _2xl: 22,
+  _3xl: 26,
+  _4xl: 32,
+  _5xl: 40,
+} as const
+
+export const lineHeight = {
+  none: 1,
+  normal: 1.5,
+  relaxed: 1.625,
+} as const
+
+export const borderRadius = {
+  _2xs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  full: 999,
+} as const
+
+export const fontWeight = {
+  normal: '400',
+  semibold: '600',
+  bold: '900',
+} as const
+
+export const gradients = {
+  sky: {
+    values: [
+      [0, '#0A7AFF'],
+      [1, '#59B9FF'],
+    ],
+    hover_value: '#0A7AFF',
+  },
+  midnight: {
+    values: [
+      [0, '#022C5E'],
+      [1, '#4079BC'],
+    ],
+    hover_value: '#022C5E',
+  },
+  sunrise: {
+    values: [
+      [0, '#4E90AE'],
+      [0.4, '#AEA3AB'],
+      [0.8, '#E6A98F'],
+      [1, '#F3A84C'],
+    ],
+    hover_value: '#AEA3AB',
+  },
+  sunset: {
+    values: [
+      [0, '#6772AF'],
+      [0.6, '#B88BB6'],
+      [1, '#FFA6AC'],
+    ],
+    hover_value: '#B88BB6',
+  },
+  summer: {
+    values: [
+      [0, '#FF6A56'],
+      [0.3, '#FF9156'],
+      [1, '#FFDD87'],
+    ],
+    hover_value: '#FF9156',
+  },
+  nordic: {
+    values: [
+      [0, '#083367'],
+      [1, '#9EE8C1'],
+    ],
+    hover_value: '#3A7085',
+  },
+  bonfire: {
+    values: [
+      [0, '#203E4E'],
+      [0.4, '#755B62'],
+      [0.8, '#CD7765'],
+      [1, '#EF956E'],
+    ],
+    hover_value: '#755B62',
+  },
+} as const
+
+export type Color = keyof typeof color
+export type Space = keyof typeof space
+export type FontSize = keyof typeof fontSize
+export type LineHeight = keyof typeof lineHeight
+export type BorderRadius = keyof typeof borderRadius
+export type FontWeight = keyof typeof fontWeight
@@ -0,0 +1,26 @@
+import {StyleProp, ViewStyle, TextStyle} from 'react-native'
+
+type LiteralToCommon<T extends PropertyKey> = T extends number
+  ? number
+  : T extends string
+  ? string
+  : T extends symbol
+  ? symbol
+  : never
+
+/**
+ * @see https://stackoverflow.com/questions/68249999/use-as-const-in-typescript-without-adding-readonly-modifiers
+ */
+export type Mutable<T> = {
+  -readonly [K in keyof T]: T[K] extends PropertyKey
+    ? LiteralToCommon<T[K]>
+    : Mutable<T[K]>
+}
+
+export type TextStyleProp = {
+  style?: StyleProp<TextStyle>
+}
+
+export type ViewStyleProp = {
+  style?: StyleProp<ViewStyle>
+}
@@ -0,0 +1,3 @@
+import {StyleSheet} from 'react-native'
+
+export const flatten = StyleSheet.flatten
@@ -0,0 +1,25 @@
+import {Platform} from 'react-native'
+
+export function web(value: any) {
+  return Platform.select({
+    web: value,
+  })
+}
+
+export function ios(value: any) {
+  return Platform.select({
+    ios: value,
+  })
+}
+
+export function android(value: any) {
+  return Platform.select({
+    android: value,
+  })
+}
+
+export function native(value: any) {
+  return Platform.select({
+    native: value,
+  })
+}
@@ -0,0 +1,64 @@
+import React from 'react'
+import {ColorSchemeName, useColorScheme} from 'react-native'
+
+import {useThemePrefs} from 'state/shell'
+import {isWeb} from 'platform/detection'
+import {ThemeName, light, dark, dim} from '#/alf/themes'
+import * as SystemUI from 'expo-system-ui'
+
+export function useColorModeTheme(): ThemeName {
+  const colorScheme = useColorScheme()
+  const {colorMode, darkTheme} = useThemePrefs()
+
+  React.useLayoutEffect(() => {
+    const theme = getThemeName(colorScheme, colorMode, darkTheme)
+    updateDocument(theme)
+    updateSystemBackground(theme)
+  }, [colorMode, colorScheme, darkTheme])
+
+  return React.useMemo(
+    () => getThemeName(colorScheme, colorMode, darkTheme),
+    [colorScheme, colorMode, darkTheme],
+  )
+}
+
+function getThemeName(
+  colorScheme: ColorSchemeName,
+  colorMode: 'system' | 'light' | 'dark',
+  darkTheme?: ThemeName,
+) {
+  if (
+    (colorMode === 'system' && colorScheme === 'light') ||
+    colorMode === 'light'
+  ) {
+    return 'light'
+  } else {
+    return darkTheme ?? 'dim'
+  }
+}
+
+function updateDocument(theme: ThemeName) {
+  // @ts-ignore web only
+  if (isWeb && typeof window !== 'undefined') {
+    // @ts-ignore web only
+    const html = window.document.documentElement
+    // remove any other color mode classes
+    html.className = html.className.replace(/(theme)--\w+/g, '')
+
+    html.classList.add(`theme--${theme}`)
+  }
+}
+
+function updateSystemBackground(theme: ThemeName) {
+  switch (theme) {
+    case 'light':
+      SystemUI.setBackgroundColorAsync(light.atoms.bg.backgroundColor)
+      break
+    case 'dark':
+      SystemUI.setBackgroundColorAsync(dark.atoms.bg.backgroundColor)
+      break
+    case 'dim':
+      SystemUI.setBackgroundColorAsync(dim.atoms.bg.backgroundColor)
+      break
+  }
+}
@@ -0,0 +1,539 @@
+import React from 'react'
+import {
+  Pressable,
+  Text,
+  PressableProps,
+  TextProps,
+  ViewStyle,
+  AccessibilityProps,
+  View,
+  TextStyle,
+  StyleSheet,
+  StyleProp,
+} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+
+import {useTheme, atoms as a, tokens, android, flatten} from '#/alf'
+import {Props as SVGIconProps} from '#/components/icons/common'
+
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
+export type ButtonColor =
+  | 'primary'
+  | 'secondary'
+  | 'negative'
+  | 'gradient_sky'
+  | 'gradient_midnight'
+  | 'gradient_sunrise'
+  | 'gradient_sunset'
+  | 'gradient_nordic'
+  | 'gradient_bonfire'
+export type ButtonSize = 'small' | 'large'
+export type ButtonShape = 'round' | 'square' | 'default'
+export type VariantProps = {
+  /**
+   * The style variation of the button
+   */
+  variant?: ButtonVariant
+  /**
+   * The color of the button
+   */
+  color?: ButtonColor
+  /**
+   * The size of the button
+   */
+  size?: ButtonSize
+  /**
+   * The shape of the button
+   */
+  shape?: ButtonShape
+}
+
+export type ButtonProps = React.PropsWithChildren<
+  Pick<PressableProps, 'disabled' | 'onPress'> &
+    AccessibilityProps &
+    VariantProps & {
+      label: string
+      style?: StyleProp<ViewStyle>
+    }
+>
+export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
+
+const Context = React.createContext<
+  VariantProps & {
+    hovered: boolean
+    focused: boolean
+    pressed: boolean
+    disabled: boolean
+  }
+>({
+  hovered: false,
+  focused: false,
+  pressed: false,
+  disabled: false,
+})
+
+export function useButtonContext() {
+  return React.useContext(Context)
+}
+
+export function Button({
+  children,
+  variant,
+  color,
+  size,
+  shape = 'default',
+  label,
+  disabled = false,
+  style,
+  ...rest
+}: ButtonProps) {
+  const t = useTheme()
+  const [state, setState] = React.useState({
+    pressed: false,
+    hovered: false,
+    focused: false,
+  })
+
+  const onPressIn = React.useCallback(() => {
+    setState(s => ({
+      ...s,
+      pressed: true,
+    }))
+  }, [setState])
+  const onPressOut = React.useCallback(() => {
+    setState(s => ({
+      ...s,
+      pressed: false,
+    }))
+  }, [setState])
+  const onHoverIn = React.useCallback(() => {
+    setState(s => ({
+      ...s,
+      hovered: true,
+    }))
+  }, [setState])
+  const onHoverOut = React.useCallback(() => {
+    setState(s => ({
+      ...s,
+      hovered: false,
+    }))
+  }, [setState])
+  const onFocus = React.useCallback(() => {
+    setState(s => ({
+      ...s,
+      focused: true,
+    }))
+  }, [setState])
+  const onBlur = React.useCallback(() => {
+    setState(s => ({
+      ...s,
+      focused: false,
+    }))
+  }, [setState])
+
+  const {baseStyles, hoverStyles, focusStyles} = React.useMemo(() => {
+    const baseStyles: ViewStyle[] = []
+    const hoverStyles: ViewStyle[] = []
+    const light = t.name === 'light'
+
+    if (color === 'primary') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: t.palette.primary_500,
+          })
+          hoverStyles.push({
+            backgroundColor: t.palette.primary_600,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: t.palette.primary_700,
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: tokens.color.blue_500,
+          })
+          hoverStyles.push(a.border, {
+            backgroundColor: light
+              ? t.palette.primary_50
+              : t.palette.primary_950,
+          })
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: light ? tokens.color.blue_200 : tokens.color.blue_900,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: light
+              ? t.palette.primary_100
+              : t.palette.primary_900,
+          })
+        }
+      }
+    } else if (color === 'secondary') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: light
+              ? tokens.color.gray_50
+              : tokens.color.gray_900,
+          })
+          hoverStyles.push({
+            backgroundColor: light
+              ? tokens.color.gray_100
+              : tokens.color.gray_950,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: light
+              ? tokens.color.gray_200
+              : tokens.color.gray_950,
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: light ? tokens.color.gray_300 : tokens.color.gray_700,
+          })
+          hoverStyles.push(a.border, t.atoms.bg_contrast_50)
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: light ? tokens.color.gray_200 : tokens.color.gray_800,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: light
+              ? tokens.color.gray_100
+              : tokens.color.gray_900,
+          })
+        }
+      }
+    } else if (color === 'negative') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: t.palette.negative_400,
+          })
+          hoverStyles.push({
+            backgroundColor: t.palette.negative_500,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: t.palette.negative_600,
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.negative_400,
+          })
+          hoverStyles.push(a.border, {
+            backgroundColor: light
+              ? t.palette.negative_50
+              : t.palette.negative_975,
+          })
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: light
+              ? t.palette.negative_200
+              : t.palette.negative_900,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: light
+              ? t.palette.negative_100
+              : t.palette.negative_950,
+          })
+        }
+      }
+    }
+
+    if (shape === 'default') {
+      if (size === 'large') {
+        baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_md)
+      } else if (size === 'small') {
+        baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
+      }
+    } else if (shape === 'round' || shape === 'square') {
+      if (size === 'large') {
+        if (shape === 'round') {
+          baseStyles.push({height: 54, width: 54})
+        } else {
+          baseStyles.push({height: 50, width: 50})
+        }
+      } else if (size === 'small') {
+        baseStyles.push({height: 40, width: 40})
+      }
+
+      if (shape === 'round') {
+        baseStyles.push(a.rounded_full)
+      } else if (shape === 'square') {
+        baseStyles.push(a.rounded_sm)
+      }
+    }
+
+    return {
+      baseStyles,
+      hoverStyles,
+      focusStyles: [
+        ...hoverStyles,
+        {
+          outline: 0,
+        } as ViewStyle,
+      ],
+    }
+  }, [t, variant, color, size, shape, disabled])
+
+  const {gradientColors, gradientHoverColors, gradientLocations} =
+    React.useMemo(() => {
+      const colors: string[] = []
+      const hoverColors: string[] = []
+      const locations: number[] = []
+      const gradient = {
+        primary: tokens.gradients.sky,
+        secondary: tokens.gradients.sky,
+        negative: tokens.gradients.sky,
+        gradient_sky: tokens.gradients.sky,
+        gradient_midnight: tokens.gradients.midnight,
+        gradient_sunrise: tokens.gradients.sunrise,
+        gradient_sunset: tokens.gradients.sunset,
+        gradient_nordic: tokens.gradients.nordic,
+        gradient_bonfire: tokens.gradients.bonfire,
+      }[color || 'primary']
+
+      if (variant === 'gradient') {
+        colors.push(...gradient.values.map(([_, color]) => color))
+        hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
+        locations.push(...gradient.values.map(([location, _]) => location))
+      }
+
+      return {
+        gradientColors: colors,
+        gradientHoverColors: hoverColors,
+        gradientLocations: locations,
+      }
+    }, [variant, color])
+
+  const context = React.useMemo(
+    () => ({
+      ...state,
+      variant,
+      color,
+      size,
+      disabled: disabled || false,
+    }),
+    [state, variant, color, size, disabled],
+  )
+
+  return (
+    <Pressable
+      role="button"
+      accessibilityHint={undefined} // optional
+      {...rest}
+      aria-label={label}
+      aria-pressed={state.pressed}
+      accessibilityLabel={label}
+      disabled={disabled || false}
+      accessibilityState={{
+        disabled: disabled || false,
+      }}
+      style={[
+        flatten(style),
+        a.flex_row,
+        a.align_center,
+        a.justify_center,
+        a.overflow_hidden,
+        a.justify_center,
+        ...baseStyles,
+        ...(state.hovered || state.pressed ? hoverStyles : []),
+        ...(state.focused ? focusStyles : []),
+      ]}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
+      onFocus={onFocus}
+      onBlur={onBlur}>
+      {variant === 'gradient' && (
+        <LinearGradient
+          colors={
+            state.hovered || state.pressed || state.focused
+              ? gradientHoverColors
+              : gradientColors
+          }
+          locations={gradientLocations}
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 1}}
+          style={[a.absolute, a.inset_0]}
+        />
+      )}
+      <Context.Provider value={context}>
+        {typeof children === 'string' ? (
+          <ButtonText>{children}</ButtonText>
+        ) : (
+          children
+        )}
+      </Context.Provider>
+    </Pressable>
+  )
+}
+
+export function useSharedButtonTextStyles() {
+  const t = useTheme()
+  const {color, variant, disabled, size} = useButtonContext()
+  return React.useMemo(() => {
+    const baseStyles: TextStyle[] = []
+    const light = t.name === 'light'
+
+    if (color === 'primary') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({color: t.palette.white})
+        } else {
+          baseStyles.push({color: t.palette.white, opacity: 0.5})
+        }
+      } else if (variant === 'outline') {
+        if (!disabled) {
+          baseStyles.push({
+            color: light ? t.palette.primary_600 : t.palette.primary_500,
+          })
+        } else {
+          baseStyles.push({color: t.palette.primary_600, opacity: 0.5})
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push({color: t.palette.primary_600})
+        } else {
+          baseStyles.push({color: t.palette.primary_600, opacity: 0.5})
+        }
+      }
+    } else if (color === 'secondary') {
+      if (variant === 'solid' || variant === 'gradient') {
+        if (!disabled) {
+          baseStyles.push({
+            color: light ? tokens.color.gray_700 : tokens.color.gray_100,
+          })
+        } else {
+          baseStyles.push({
+            color: light ? tokens.color.gray_400 : tokens.color.gray_700,
+          })
+        }
+      } else if (variant === 'outline') {
+        if (!disabled) {
+          baseStyles.push({
+            color: light ? tokens.color.gray_600 : tokens.color.gray_300,
+          })
+        } else {
+          baseStyles.push({
+            color: light ? tokens.color.gray_400 : tokens.color.gray_700,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push({
+            color: light ? tokens.color.gray_600 : tokens.color.gray_300,
+          })
+        } else {
+          baseStyles.push({
+            color: light ? tokens.color.gray_400 : tokens.color.gray_600,
+          })
+        }
+      }
+    } else if (color === 'negative') {
+      if (variant === 'solid' || variant === 'gradient') {
+        if (!disabled) {
+          baseStyles.push({color: t.palette.white})
+        } else {
+          baseStyles.push({color: t.palette.white, opacity: 0.5})
+        }
+      } else if (variant === 'outline') {
+        if (!disabled) {
+          baseStyles.push({color: t.palette.negative_400})
+        } else {
+          baseStyles.push({color: t.palette.negative_400, opacity: 0.5})
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push({color: t.palette.negative_400})
+        } else {
+          baseStyles.push({color: t.palette.negative_400, opacity: 0.5})
+        }
+      }
+    } else {
+      if (!disabled) {
+        baseStyles.push({color: t.palette.white})
+      } else {
+        baseStyles.push({color: t.palette.white, opacity: 0.5})
+      }
+    }
+
+    if (size === 'large') {
+      baseStyles.push(a.text_md, android({paddingBottom: 1}))
+    } else {
+      baseStyles.push(a.text_sm, android({paddingBottom: 1}))
+    }
+
+    return StyleSheet.flatten(baseStyles)
+  }, [t, variant, color, size, disabled])
+}
+
+export function ButtonText({children, style, ...rest}: ButtonTextProps) {
+  const textStyles = useSharedButtonTextStyles()
+
+  return (
+    <Text {...rest} style={[a.font_bold, a.text_center, textStyles, style]}>
+      {children}
+    </Text>
+  )
+}
+
+export function ButtonIcon({
+  icon: Comp,
+  position,
+}: {
+  icon: React.ComponentType<SVGIconProps>
+  position?: 'left' | 'right'
+}) {
+  const {size, disabled} = useButtonContext()
+  const textStyles = useSharedButtonTextStyles()
+
+  return (
+    <View
+      style={[
+        a.z_20,
+        {
+          opacity: disabled ? 0.7 : 1,
+          marginLeft: position === 'left' ? -2 : 0,
+          marginRight: position === 'right' ? -2 : 0,
+        },
+      ]}>
+      <Comp
+        size={size === 'large' ? 'md' : 'sm'}
+        style={[{color: textStyles.color, pointerEvents: 'none'}]}
+      />
+    </View>
+  )
+}
@@ -0,0 +1,35 @@
+import React from 'react'
+
+import {useDialogStateContext} from '#/state/dialogs'
+import {DialogContextProps, DialogControlProps} from '#/components/Dialog/types'
+
+export const Context = React.createContext<DialogContextProps>({
+  close: () => {},
+})
+
+export function useDialogContext() {
+  return React.useContext(Context)
+}
+
+export function useDialogControl() {
+  const id = React.useId()
+  const control = React.useRef<DialogControlProps>({
+    open: () => {},
+    close: () => {},
+  })
+  const {activeDialogs} = useDialogStateContext()
+
+  React.useEffect(() => {
+    activeDialogs.current.set(id, control)
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      activeDialogs.current.delete(id)
+    }
+  }, [id, activeDialogs])
+
+  return {
+    ref: control,
+    open: () => control.current.open(),
+    close: () => control.current.close(),
+  }
+}
@@ -0,0 +1,162 @@
+import React, {useImperativeHandle} from 'react'
+import {View, Dimensions} from 'react-native'
+import BottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetScrollView,
+  BottomSheetTextInput,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+
+import {useTheme, atoms as a} from '#/alf'
+import {Portal} from '#/components/Portal'
+import {createInput} from '#/components/forms/TextField'
+
+import {
+  DialogOuterProps,
+  DialogControlProps,
+  DialogInnerProps,
+} from '#/components/Dialog/types'
+import {Context} from '#/components/Dialog/context'
+
+export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
+export * from '#/components/Dialog/types'
+// @ts-ignore
+export const Input = createInput(BottomSheetTextInput)
+
+export function Outer({
+  children,
+  control,
+  onClose,
+  nativeOptions,
+}: React.PropsWithChildren<DialogOuterProps>) {
+  const t = useTheme()
+  const sheet = React.useRef<BottomSheet>(null)
+  const sheetOptions = nativeOptions?.sheet || {}
+  const hasSnapPoints = !!sheetOptions.snapPoints
+
+  const open = React.useCallback<DialogControlProps['open']>((i = 0) => {
+    sheet.current?.snapToIndex(i)
+  }, [])
+
+  const close = React.useCallback(() => {
+    sheet.current?.close()
+    onClose?.()
+  }, [onClose])
+
+  useImperativeHandle(
+    control.ref,
+    () => ({
+      open,
+      close,
+    }),
+    [open, close],
+  )
+
+  const context = React.useMemo(() => ({close}), [close])
+
+  return (
+    <Portal>
+      <BottomSheet
+        enableDynamicSizing={!hasSnapPoints}
+        enablePanDownToClose
+        keyboardBehavior="interactive"
+        android_keyboardInputMode="adjustResize"
+        keyboardBlurBehavior="restore"
+        {...sheetOptions}
+        ref={sheet}
+        index={-1}
+        backgroundStyle={{backgroundColor: 'transparent'}}
+        backdropComponent={props => (
+          <BottomSheetBackdrop
+            opacity={0.4}
+            appearsOnIndex={0}
+            disappearsOnIndex={-1}
+            {...props}
+          />
+        )}
+        handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
+        handleStyle={{display: 'none'}}
+        onClose={onClose}>
+        <Context.Provider value={context}>
+          <View
+            style={[
+              a.absolute,
+              a.inset_0,
+              t.atoms.bg,
+              {
+                borderTopLeftRadius: 40,
+                borderTopRightRadius: 40,
+                height: Dimensions.get('window').height * 2,
+              },
+            ]}
+          />
+          {children}
+        </Context.Provider>
+      </BottomSheet>
+    </Portal>
+  )
+}
+
+// TODO a11y props here, or is that handled by the sheet?
+export function Inner(props: DialogInnerProps) {
+  const insets = useSafeAreaInsets()
+  return (
+    <BottomSheetView
+      style={[
+        a.p_lg,
+        a.pt_3xl,
+        {
+          borderTopLeftRadius: 40,
+          borderTopRightRadius: 40,
+          paddingBottom: insets.bottom + a.pb_5xl.paddingBottom,
+        },
+      ]}>
+      {props.children}
+    </BottomSheetView>
+  )
+}
+
+export function ScrollableInner(props: DialogInnerProps) {
+  const insets = useSafeAreaInsets()
+  return (
+    <BottomSheetScrollView
+      style={[
+        a.flex_1, // main diff is this
+        a.p_lg,
+        a.pt_3xl,
+        {
+          borderTopLeftRadius: 40,
+          borderTopRightRadius: 40,
+        },
+      ]}>
+      {props.children}
+      <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+    </BottomSheetScrollView>
+  )
+}
+
+export function Handle() {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.absolute,
+        a.rounded_sm,
+        a.z_10,
+        {
+          top: a.pt_lg.paddingTop,
+          width: 35,
+          height: 4,
+          alignSelf: 'center',
+          backgroundColor: t.palette.contrast_900,
+          opacity: 0.5,
+        },
+      ]}
+    />
+  )
+}
+
+export function Close() {
+  return null
+}
@@ -0,0 +1,194 @@
+import React, {useImperativeHandle} from 'react'
+import {View, TouchableWithoutFeedback} from 'react-native'
+import {FocusScope} from '@tamagui/focus-scope'
+import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useTheme, atoms as a, useBreakpoints, web} from '#/alf'
+import {Portal} from '#/components/Portal'
+
+import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types'
+import {Context} from '#/components/Dialog/context'
+
+export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
+export * from '#/components/Dialog/types'
+export {Input} from '#/components/forms/TextField'
+
+const stopPropagation = (e: any) => e.stopPropagation()
+
+export function Outer({
+  control,
+  onClose,
+  children,
+}: React.PropsWithChildren<DialogOuterProps>) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [isVisible, setIsVisible] = React.useState(true)
+
+  const open = React.useCallback(() => {
+    setIsOpen(true)
+  }, [setIsOpen])
+
+  const close = React.useCallback(async () => {
+    setIsVisible(false)
+    await new Promise(resolve => setTimeout(resolve, 150))
+    setIsOpen(false)
+    setIsVisible(true)
+    onClose?.()
+  }, [onClose, setIsOpen])
+
+  useImperativeHandle(
+    control.ref,
+    () => ({
+      open,
+      close,
+    }),
+    [open, close],
+  )
+
+  React.useEffect(() => {
+    if (!isOpen) return
+
+    function handler(e: KeyboardEvent) {
+      if (e.key === 'Escape') close()
+    }
+
+    document.addEventListener('keydown', handler)
+
+    return () => document.removeEventListener('keydown', handler)
+  }, [isOpen, close])
+
+  const context = React.useMemo(
+    () => ({
+      close,
+    }),
+    [close],
+  )
+
+  return (
+    <>
+      {isOpen && (
+        <Portal>
+          <Context.Provider value={context}>
+            <TouchableWithoutFeedback
+              accessibilityHint={undefined}
+              accessibilityLabel={_(msg`Close active dialog`)}
+              onPress={close}>
+              <View
+                style={[
+                  web(a.fixed),
+                  a.inset_0,
+                  a.z_10,
+                  a.align_center,
+                  gtMobile ? a.p_lg : a.p_md,
+                  {overflowY: 'auto'},
+                ]}>
+                {isVisible && (
+                  <Animated.View
+                    entering={FadeIn.duration(150)}
+                    // exiting={FadeOut.duration(150)}
+                    style={[
+                      web(a.fixed),
+                      a.inset_0,
+                      {opacity: 0.5, backgroundColor: t.palette.black},
+                    ]}
+                  />
+                )}
+
+                <View
+                  style={[
+                    a.w_full,
+                    a.z_20,
+                    a.justify_center,
+                    a.align_center,
+                    {
+                      minHeight: web('calc(90vh - 36px)') || undefined,
+                    },
+                  ]}>
+                  {isVisible ? children : null}
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </Context.Provider>
+        </Portal>
+      )}
+    </>
+  )
+}
+
+export function Inner({
+  children,
+  style,
+  label,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+}: DialogInnerProps) {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  return (
+    <FocusScope loop enabled trapped>
+      <Animated.View
+        role="dialog"
+        aria-role="dialog"
+        aria-label={label}
+        aria-labelledby={accessibilityLabelledBy}
+        aria-describedby={accessibilityDescribedBy}
+        // @ts-ignore web only -prf
+        onClick={stopPropagation}
+        onStartShouldSetResponder={_ => true}
+        onTouchEnd={stopPropagation}
+        entering={FadeInDown.duration(100)}
+        // exiting={FadeOut.duration(100)}
+        style={[
+          a.relative,
+          a.rounded_md,
+          a.w_full,
+          a.border,
+          gtMobile ? a.p_xl : a.p_lg,
+          t.atoms.bg,
+          {
+            maxWidth: 600,
+            borderColor: t.palette.contrast_200,
+            shadowColor: t.palette.black,
+            shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
+            shadowRadius: 30,
+          },
+          ...(Array.isArray(style) ? style : [style || {}]),
+        ]}>
+        {children}
+      </Animated.View>
+    </FocusScope>
+  )
+}
+
+export const ScrollableInner = Inner
+
+export function Handle() {
+  return null
+}
+
+/**
+ * TODO(eric) unused rn
+ */
+// export function Close() {
+//   const {_} = useLingui()
+//   const t = useTheme()
+//   const {close} = useDialogContext()
+//   return (
+//     <View
+//       style={[
+//         a.absolute,
+//         a.z_10,
+//         {
+//           top: a.pt_lg.paddingTop,
+//           right: a.pr_lg.paddingRight,
+//         },
+//       ]}>
+//       <Button onPress={close} label={_(msg`Close active dialog`)}>
+//       </Button>
+//     </View>
+//   )
+// }
@@ -0,0 +1,43 @@
+import React from 'react'
+import type {ViewStyle, AccessibilityProps} from 'react-native'
+import {BottomSheetProps} from '@gorhom/bottom-sheet'
+
+type A11yProps = Required<AccessibilityProps>
+
+export type DialogContextProps = {
+  close: () => void
+}
+
+export type DialogControlProps = {
+  open: (index?: number) => void
+  close: () => void
+}
+
+export type DialogOuterProps = {
+  control: {
+    ref: React.RefObject<DialogControlProps>
+    open: (index?: number) => void
+    close: () => void
+  }
+  onClose?: () => void
+  nativeOptions?: {
+    sheet?: Omit<BottomSheetProps, 'children'>
+  }
+  webOptions?: {}
+}
+
+type DialogInnerPropsBase<T> = React.PropsWithChildren<{
+  style?: ViewStyle
+}> &
+  T
+export type DialogInnerProps =
+  | DialogInnerPropsBase<{
+      label?: undefined
+      accessibilityLabelledBy: A11yProps['aria-labelledby']
+      accessibilityDescribedBy: string
+    }>
+  | DialogInnerPropsBase<{
+      label: string
+      accessibilityLabelledBy?: undefined
+      accessibilityDescribedBy?: undefined
+    }>
@@ -0,0 +1,18 @@
+import React from 'react'
+import {View} from 'react-native'
+import {atoms as a, useTheme, ViewStyleProp, flatten} from '#/alf'
+
+export function Divider({style}: ViewStyleProp) {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.border_t,
+        t.atoms.border_contrast_low,
+        flatten(style),
+      ]}
+    />
+  )
+}
@@ -0,0 +1,263 @@
+import React from 'react'
+import {
+  GestureResponderEvent,
+  Linking,
+  TouchableWithoutFeedback,
+} from 'react-native'
+import {
+  useLinkProps,
+  useNavigation,
+  StackActions,
+} from '@react-navigation/native'
+import {sanitizeUrl} from '@braintree/sanitize-url'
+
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {isWeb} from '#/platform/detection'
+import {useTheme, web, flatten, TextStyleProp} from '#/alf'
+import {Button, ButtonProps} from '#/components/Button'
+import {AllNavigatorParams, NavigationProp} from '#/lib/routes/types'
+import {
+  convertBskyAppUrlIfNeeded,
+  isExternalUrl,
+  linkRequiresWarning,
+} from '#/lib/strings/url-helpers'
+import {useModalControls} from '#/state/modals'
+import {router} from '#/routes'
+import {Text} from '#/components/Typography'
+
+/**
+ * Only available within a `Link`, since that inherits from `Button`.
+ * `InlineLink` provides no context.
+ */
+export {useButtonContext as useLinkContext} from '#/components/Button'
+
+type BaseLinkProps = Pick<
+  Parameters<typeof useLinkProps<AllNavigatorParams>>[0],
+  'to'
+> & {
+  /**
+   * The React Navigation `StackAction` to perform when the link is pressed.
+   */
+  action?: 'push' | 'replace' | 'navigate'
+
+  /**
+   * If true, will warn the user if the link text does not match the href.
+   *
+   * Note: atm this only works for `InlineLink`s with a string child.
+   */
+  warnOnMismatchingTextChild?: boolean
+}
+
+export function useLink({
+  to,
+  displayText,
+  action = 'push',
+  warnOnMismatchingTextChild,
+}: BaseLinkProps & {
+  displayText: string
+}) {
+  const navigation = useNavigation<NavigationProp>()
+  const {href} = useLinkProps<AllNavigatorParams>({
+    to:
+      typeof to === 'string' ? convertBskyAppUrlIfNeeded(sanitizeUrl(to)) : to,
+  })
+  const isExternal = isExternalUrl(href)
+  const {openModal, closeModal} = useModalControls()
+
+  const onPress = React.useCallback(
+    (e: GestureResponderEvent) => {
+      const requiresWarning = Boolean(
+        warnOnMismatchingTextChild &&
+          displayText &&
+          isExternal &&
+          linkRequiresWarning(href, displayText),
+      )
+
+      if (requiresWarning) {
+        e.preventDefault()
+
+        openModal({
+          name: 'link-warning',
+          text: displayText,
+          href: href,
+        })
+      } else {
+        e.preventDefault()
+
+        if (isExternal) {
+          Linking.openURL(href)
+        } else {
+          /**
+           * A `GestureResponderEvent`, but cast to `any` to avoid using a bunch
+           * of @ts-ignore below.
+           */
+          const event = e as any
+          const isMiddleClick = isWeb && event.button === 1
+          const isMetaKey =
+            isWeb &&
+            (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+          const shouldOpenInNewTab = isMetaKey || isMiddleClick
+
+          if (
+            shouldOpenInNewTab ||
+            href.startsWith('http') ||
+            href.startsWith('mailto')
+          ) {
+            Linking.openURL(href)
+          } else {
+            closeModal() // close any active modals
+
+            if (action === 'push') {
+              navigation.dispatch(StackActions.push(...router.matchPath(href)))
+            } else if (action === 'replace') {
+              navigation.dispatch(
+                StackActions.replace(...router.matchPath(href)),
+              )
+            } else if (action === 'navigate') {
+              // @ts-ignore
+              navigation.navigate(...router.matchPath(href))
+            } else {
+              throw Error('Unsupported navigator action.')
+            }
+          }
+        }
+      }
+    },
+    [
+      href,
+      isExternal,
+      warnOnMismatchingTextChild,
+      navigation,
+      action,
+      displayText,
+      closeModal,
+      openModal,
+    ],
+  )
+
+  return {
+    isExternal,
+    href,
+    onPress,
+  }
+}
+
+export type LinkProps = Omit<BaseLinkProps, 'warnOnMismatchingTextChild'> &
+  Omit<ButtonProps, 'style' | 'onPress' | 'disabled' | 'label'> & {
+    /**
+     * Label for a11y. Defaults to the href.
+     */
+    label?: string
+  }
+
+/**
+ * A interactive element that renders as a `<a>` tag on the web. On mobile it
+ * will translate the `href` to navigator screens and params and dispatch a
+ * navigation action.
+ *
+ * Intended to behave as a web anchor tag. For more complex routing, use a
+ * `Button`.
+ */
+export function Link({children, to, action = 'push', ...rest}: LinkProps) {
+  const {href, isExternal, onPress} = useLink({
+    to,
+    displayText: typeof children === 'string' ? children : '',
+    action,
+  })
+
+  return (
+    <Button
+      label={href}
+      {...rest}
+      role="link"
+      accessibilityRole="link"
+      href={href}
+      onPress={onPress}
+      {...web({
+        hrefAttrs: {
+          target: isExternal ? 'blank' : undefined,
+          rel: isExternal ? 'noopener noreferrer' : undefined,
+        },
+        dataSet: {
+          // default to no underline, apply this ourselves
+          noUnderline: '1',
+        },
+      })}>
+      {children}
+    </Button>
+  )
+}
+
+export type InlineLinkProps = React.PropsWithChildren<
+  BaseLinkProps &
+    TextStyleProp & {
+      /**
+       * Label for a11y. Defaults to the href.
+       */
+      label?: string
+    }
+>
+
+export function InlineLink({
+  children,
+  to,
+  action = 'push',
+  warnOnMismatchingTextChild,
+  style,
+  ...rest
+}: InlineLinkProps) {
+  const t = useTheme()
+  const stringChildren = typeof children === 'string'
+  const {href, isExternal, onPress} = useLink({
+    to,
+    displayText: stringChildren ? children : '',
+    action,
+    warnOnMismatchingTextChild,
+  })
+  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
+
+  return (
+    <TouchableWithoutFeedback
+      accessibilityRole="button"
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onFocus={onFocus}
+      onBlur={onBlur}>
+      <Text
+        label={href}
+        {...rest}
+        style={[
+          {color: t.palette.primary_500},
+          (focused || pressed) && {
+            outline: 0,
+            textDecorationLine: 'underline',
+            textDecorationColor: t.palette.primary_500,
+          },
+          flatten(style),
+        ]}
+        role="link"
+        accessibilityRole="link"
+        href={href}
+        {...web({
+          hrefAttrs: {
+            target: isExternal ? 'blank' : undefined,
+            rel: isExternal ? 'noopener noreferrer' : undefined,
+          },
+          dataSet: stringChildren
+            ? {}
+            : {
+                // default to no underline, apply this ourselves
+                noUnderline: '1',
+              },
+        })}>
+        {children}
+      </Text>
+    </TouchableWithoutFeedback>
+  )
+}
@@ -0,0 +1,41 @@
+import React from 'react'
+import Animated, {
+  Easing,
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated'
+
+import {atoms as a} from '#/alf'
+import {Props, useCommonSVGProps} from '#/components/icons/common'
+import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
+
+export function Loader(props: Props) {
+  const common = useCommonSVGProps(props)
+  const rotation = useSharedValue(0)
+
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [{rotate: rotation.value + 'deg'}],
+  }))
+
+  React.useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, {duration: 500, easing: Easing.linear}),
+      -1,
+    )
+  }, [rotation])
+
+  return (
+    <Animated.View
+      style={[
+        a.relative,
+        a.justify_center,
+        a.align_center,
+        {width: common.size, height: common.size},
+        animatedStyles,
+      ]}>
+      <Icon {...props} style={[a.absolute, a.inset_0, props.style]} />
+    </Animated.View>
+  )
+}
@@ -0,0 +1,65 @@
+import React from 'react'
+
+type Component = React.ReactElement
+
+type ContextType = {
+  outlet: Component | null
+  append(id: string, component: Component): void
+  remove(id: string): void
+}
+
+type ComponentMap = {
+  [id: string]: Component
+}
+
+export function createPortalGroup() {
+  const Context = React.createContext<ContextType>({
+    outlet: null,
+    append: () => {},
+    remove: () => {},
+  })
+
+  function Provider(props: React.PropsWithChildren<{}>) {
+    const map = React.useRef<ComponentMap>({})
+    const [outlet, setOutlet] = React.useState<ContextType['outlet']>(null)
+
+    const append = React.useCallback<ContextType['append']>((id, component) => {
+      if (map.current[id]) return
+      map.current[id] = <React.Fragment key={id}>{component}</React.Fragment>
+      setOutlet(<>{Object.values(map.current)}</>)
+    }, [])
+
+    const remove = React.useCallback<ContextType['remove']>(id => {
+      delete map.current[id]
+      setOutlet(<>{Object.values(map.current)}</>)
+    }, [])
+
+    return (
+      <Context.Provider value={{outlet, append, remove}}>
+        {props.children}
+      </Context.Provider>
+    )
+  }
+
+  function Outlet() {
+    const ctx = React.useContext(Context)
+    return ctx.outlet
+  }
+
+  function Portal({children}: React.PropsWithChildren<{}>) {
+    const {append, remove} = React.useContext(Context)
+    const id = React.useId()
+    React.useEffect(() => {
+      append(id, children as Component)
+      return () => remove(id)
+    }, [id, children, append, remove])
+    return null
+  }
+
+  return {Provider, Outlet, Portal}
+}
+
+const DefaultPortal = createPortalGroup()
+export const Provider = DefaultPortal.Provider
+export const Outlet = DefaultPortal.Outlet
+export const Portal = DefaultPortal.Portal
@@ -0,0 +1,118 @@
+import React from 'react'
+import {View, PressableProps} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useTheme, atoms as a} from '#/alf'
+import {Text} from '#/components/Typography'
+import {Button} from '#/components/Button'
+
+import * as Dialog from '#/components/Dialog'
+
+export {useDialogControl as usePromptControl} from '#/components/Dialog'
+
+const Context = React.createContext<{
+  titleId: string
+  descriptionId: string
+}>({
+  titleId: '',
+  descriptionId: '',
+})
+
+export function Outer({
+  children,
+  control,
+}: React.PropsWithChildren<{
+  control: Dialog.DialogOuterProps['control']
+}>) {
+  const titleId = React.useId()
+  const descriptionId = React.useId()
+
+  const context = React.useMemo(
+    () => ({titleId, descriptionId}),
+    [titleId, descriptionId],
+  )
+
+  return (
+    <Dialog.Outer control={control}>
+      <Context.Provider value={context}>
+        <Dialog.Handle />
+
+        <Dialog.Inner
+          accessibilityLabelledBy={titleId}
+          accessibilityDescribedBy={descriptionId}
+          style={{width: 'auto', maxWidth: 400}}>
+          {children}
+        </Dialog.Inner>
+      </Context.Provider>
+    </Dialog.Outer>
+  )
+}
+
+export function Title({children}: React.PropsWithChildren<{}>) {
+  const {titleId} = React.useContext(Context)
+  return (
+    <Text nativeID={titleId} style={[a.text_2xl, a.font_bold, a.pb_sm]}>
+      {children}
+    </Text>
+  )
+}
+
+export function Description({children}: React.PropsWithChildren<{}>) {
+  const t = useTheme()
+  const {descriptionId} = React.useContext(Context)
+  return (
+    <Text
+      nativeID={descriptionId}
+      style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high, a.pb_lg]}>
+      {children}
+    </Text>
+  )
+}
+
+export function Actions({children}: React.PropsWithChildren<{}>) {
+  return (
+    <View style={[a.w_full, a.flex_row, a.gap_sm, a.justify_end]}>
+      {children}
+    </View>
+  )
+}
+
+export function Cancel({
+  children,
+}: React.PropsWithChildren<{onPress?: PressableProps['onPress']}>) {
+  const {_} = useLingui()
+  const {close} = Dialog.useDialogContext()
+  return (
+    <Button
+      variant="solid"
+      color="secondary"
+      size="small"
+      label={_(msg`Cancel`)}
+      onPress={close}>
+      {children}
+    </Button>
+  )
+}
+
+export function Action({
+  children,
+  onPress,
+}: React.PropsWithChildren<{onPress?: () => void}>) {
+  const {_} = useLingui()
+  const {close} = Dialog.useDialogContext()
+  const handleOnPress = React.useCallback(() => {
+    close()
+    onPress?.()
+  }, [close, onPress])
+  return (
+    <Button
+      variant="solid"
+      color="primary"
+      size="small"
+      label={_(msg`Confirm`)}
+      onPress={handleOnPress}>
+      {children}
+    </Button>
+  )
+}
@@ -0,0 +1,131 @@
+import React from 'react'
+import {RichText as RichTextAPI, AppBskyRichtextFacet} from '@atproto/api'
+
+import {atoms as a, TextStyleProp} from '#/alf'
+import {InlineLink} from '#/components/Link'
+import {Text} from '#/components/Typography'
+import {toShortUrl} from 'lib/strings/url-helpers'
+import {getAgent} from '#/state/session'
+
+const WORD_WRAP = {wordWrap: 1}
+
+export function RichText({
+  testID,
+  value,
+  style,
+  numberOfLines,
+  disableLinks,
+  resolveFacets = false,
+}: TextStyleProp & {
+  value: RichTextAPI | string
+  testID?: string
+  numberOfLines?: number
+  disableLinks?: boolean
+  resolveFacets?: boolean
+}) {
+  const detected = React.useRef(false)
+  const [richText, setRichText] = React.useState<RichTextAPI>(() =>
+    value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),
+  )
+  const styles = [a.leading_normal, style]
+
+  React.useEffect(() => {
+    if (!resolveFacets) return
+
+    async function detectFacets() {
+      const rt = new RichTextAPI({text: richText.text})
+      await rt.detectFacets(getAgent())
+      setRichText(rt)
+    }
+
+    if (!detected.current) {
+      detected.current = true
+      detectFacets()
+    }
+  }, [richText, setRichText, resolveFacets])
+
+  const {text, facets} = richText
+
+  if (!facets?.length) {
+    if (text.length <= 5 && /^\p{Extended_Pictographic}+$/u.test(text)) {
+      return (
+        <Text
+          testID={testID}
+          style={[
+            {
+              fontSize: 26,
+              lineHeight: 30,
+            },
+          ]}
+          // @ts-ignore web only -prf
+          dataSet={WORD_WRAP}>
+          {text}
+        </Text>
+      )
+    }
+    return (
+      <Text
+        testID={testID}
+        style={styles}
+        numberOfLines={numberOfLines}
+        // @ts-ignore web only -prf
+        dataSet={WORD_WRAP}>
+        {text}
+      </Text>
+    )
+  }
+
+  const els = []
+  let key = 0
+  // N.B. must access segments via `richText.segments`, not via destructuring
+  for (const segment of richText.segments()) {
+    const link = segment.link
+    const mention = segment.mention
+    if (
+      mention &&
+      AppBskyRichtextFacet.validateMention(mention).success &&
+      !disableLinks
+    ) {
+      els.push(
+        <InlineLink
+          key={key}
+          to={`/profile/${mention.did}`}
+          style={[...styles, {pointerEvents: 'auto'}]}
+          // @ts-ignore TODO
+          dataSet={WORD_WRAP}>
+          {segment.text}
+        </InlineLink>,
+      )
+    } else if (link && AppBskyRichtextFacet.validateLink(link).success) {
+      if (disableLinks) {
+        els.push(toShortUrl(segment.text))
+      } else {
+        els.push(
+          <InlineLink
+            key={key}
+            to={link.uri}
+            style={[...styles, {pointerEvents: 'auto'}]}
+            // @ts-ignore TODO
+            dataSet={WORD_WRAP}
+            warnOnMismatchingLabel>
+            {toShortUrl(segment.text)}
+          </InlineLink>,
+        )
+      }
+    } else {
+      els.push(segment.text)
+    }
+    key++
+  }
+
+  return (
+    <Text
+      testID={testID}
+      style={styles}
+      numberOfLines={numberOfLines}
+      // @ts-ignore web only -prf
+      dataSet={WORD_WRAP}>
+      {els}
+    </Text>
+  )
+}
@@ -0,0 +1,98 @@
+import React from 'react'
+import {Text as RNText, TextStyle, TextProps} from 'react-native'
+
+import {useTheme, atoms, web, flatten} from '#/alf'
+
+/**
+ * Util to calculate lineHeight from a text size atom and a leading atom
+ *
+ * Example:
+ *   `leading(atoms.text_md, atoms.leading_normal)` // => 24
+ */
+export function leading<
+  Size extends {fontSize?: number},
+  Leading extends {lineHeight?: number},
+>(textSize: Size, leading: Leading) {
+  const size = textSize?.fontSize || atoms.text_md.fontSize
+  const lineHeight = leading?.lineHeight || atoms.leading_normal.lineHeight
+  return Math.round(size * lineHeight)
+}
+
+/**
+ * Ensures that `lineHeight` defaults to a relative value of `1`, or applies
+ * other relative leading atoms.
+ *
+ * If the `lineHeight` value is > 2, we assume it's an absolute value and
+ * returns it as-is.
+ */
+function normalizeTextStyles(styles: TextStyle[]) {
+  const s = flatten(styles)
+  // should always be defined on these components
+  const fontSize = s.fontSize || atoms.text_md.fontSize
+
+  if (s?.lineHeight) {
+    if (s.lineHeight <= 2) {
+      s.lineHeight = Math.round(fontSize * s.lineHeight)
+    }
+  } else {
+    s.lineHeight = fontSize
+  }
+
+  return s
+}
+
+/**
+ * Our main text component. Use this most of the time.
+ */
+export function Text({style, ...rest}: TextProps) {
+  const t = useTheme()
+  const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)])
+  return <RNText style={s} {...rest} />
+}
+
+export function createHeadingElement({level}: {level: number}) {
+  return function HeadingElement({style, ...rest}: TextProps) {
+    const t = useTheme()
+    const attr =
+      web({
+        role: 'heading',
+        'aria-level': level,
+      }) || {}
+    return (
+      <RNText
+        {...attr}
+        {...rest}
+        style={normalizeTextStyles([t.atoms.text, flatten(style)])}
+      />
+    )
+  }
+}
+
+/*
+ * Use semantic components when it's beneficial to the user or to a web scraper
+ */
+export const H1 = createHeadingElement({level: 1})
+export const H2 = createHeadingElement({level: 2})
+export const H3 = createHeadingElement({level: 3})
+export const H4 = createHeadingElement({level: 4})
+export const H5 = createHeadingElement({level: 5})
+export const H6 = createHeadingElement({level: 6})
+export function P({style, ...rest}: TextProps) {
+  const t = useTheme()
+  const attr =
+    web({
+      role: 'paragraph',
+    }) || {}
+  return (
+    <RNText
+      {...attr}
+      {...rest}
+      style={normalizeTextStyles([
+        atoms.text_md,
+        atoms.leading_normal,
+        t.atoms.text,
+        flatten(style),
+      ])}
+    />
+  )
+}
@@ -0,0 +1,108 @@
+import React from 'react'
+import {View, Pressable} from 'react-native'
+import DateTimePicker, {
+  BaseProps as DateTimePickerProps,
+} from '@react-native-community/datetimepicker'
+
+import {useTheme, atoms} from '#/alf'
+import {Text} from '#/components/Typography'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import * as TextField from '#/components/forms/TextField'
+import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
+
+import {DateFieldProps} from '#/components/forms/DateField/types'
+import {
+  localizeDate,
+  toSimpleDateString,
+} from '#/components/forms/DateField/utils'
+
+export * as utils from '#/components/forms/DateField/utils'
+export const Label = TextField.Label
+
+export function DateField({
+  value,
+  onChangeDate,
+  label,
+  isInvalid,
+  testID,
+}: DateFieldProps) {
+  const t = useTheme()
+  const [open, setOpen] = React.useState(false)
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
+  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+
+  const {chromeFocus, chromeError, chromeErrorHover} =
+    TextField.useSharedInputStyles()
+
+  const onChangeInternal = React.useCallback<
+    Required<DateTimePickerProps>['onChange']
+  >(
+    (_event, date) => {
+      setOpen(false)
+
+      if (date) {
+        const formatted = toSimpleDateString(date)
+        onChangeDate(formatted)
+      }
+    },
+    [onChangeDate, setOpen],
+  )
+
+  return (
+    <View style={[atoms.relative, atoms.w_full]}>
+      <Pressable
+        aria-label={label}
+        accessibilityLabel={label}
+        accessibilityHint={undefined}
+        onPress={() => setOpen(true)}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        style={[
+          {
+            paddingTop: 16,
+            paddingBottom: 16,
+            borderColor: 'transparent',
+            borderWidth: 2,
+          },
+          atoms.flex_row,
+          atoms.flex_1,
+          atoms.w_full,
+          atoms.px_lg,
+          atoms.rounded_sm,
+          t.atoms.bg_contrast_50,
+          focused || pressed ? chromeFocus : {},
+          isInvalid ? chromeError : {},
+          isInvalid && (focused || pressed) ? chromeErrorHover : {},
+        ]}>
+        <TextField.Icon icon={CalendarDays} />
+
+        <Text
+          style={[atoms.text_md, atoms.pl_xs, t.atoms.text, {paddingTop: 3}]}>
+          {localizeDate(value)}
+        </Text>
+      </Pressable>
+
+      {open && (
+        <DateTimePicker
+          aria-label={label}
+          accessibilityLabel={label}
+          accessibilityHint={undefined}
+          testID={`${testID}-datepicker`}
+          mode="date"
+          timeZoneName={'Etc/UTC'}
+          display="spinner"
+          // @ts-ignore applies in iOS only -prf
+          themeVariant={t.name === 'dark' ? 'dark' : 'light'}
+          value={new Date(value)}
+          onChange={onChangeInternal}
+        />
+      )}
+    </View>
+  )
+}
@@ -0,0 +1,56 @@
+import React from 'react'
+import {View} from 'react-native'
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from '@react-native-community/datetimepicker'
+
+import {useTheme, atoms} from '#/alf'
+import * as TextField from '#/components/forms/TextField'
+import {toSimpleDateString} from '#/components/forms/DateField/utils'
+import {DateFieldProps} from '#/components/forms/DateField/types'
+
+export * as utils from '#/components/forms/DateField/utils'
+export const Label = TextField.Label
+
+/**
+ * Date-only input. Accepts a date in the format YYYY-MM-DD, and reports date
+ * changes in the same format.
+ *
+ * For dates of unknown format, convert with the
+ * `utils.toSimpleDateString(Date)` export of this file.
+ */
+export function DateField({
+  value,
+  onChangeDate,
+  testID,
+  label,
+}: DateFieldProps) {
+  const t = useTheme()
+
+  const onChangeInternal = React.useCallback(
+    (event: DateTimePickerEvent, date: Date | undefined) => {
+      if (date) {
+        const formatted = toSimpleDateString(date)
+        onChangeDate(formatted)
+      }
+    },
+    [onChangeDate],
+  )
+
+  return (
+    <View style={[atoms.relative, atoms.w_full]}>
+      <DateTimePicker
+        aria-label={label}
+        accessibilityLabel={label}
+        accessibilityHint={undefined}
+        testID={`${testID}-datepicker`}
+        mode="date"
+        timeZoneName={'Etc/UTC'}
+        display="spinner"
+        themeVariant={t.name === 'dark' ? 'dark' : 'light'}
+        value={new Date(value)}
+        onChange={onChangeInternal}
+      />
+    </View>
+  )
+}
@@ -0,0 +1,64 @@
+import React from 'react'
+import {TextInput, TextInputProps, StyleSheet} from 'react-native'
+// @ts-ignore
+import {unstable_createElement} from 'react-native-web'
+
+import * as TextField from '#/components/forms/TextField'
+import {toSimpleDateString} from '#/components/forms/DateField/utils'
+import {DateFieldProps} from '#/components/forms/DateField/types'
+
+export * as utils from '#/components/forms/DateField/utils'
+export const Label = TextField.Label
+
+const InputBase = React.forwardRef<HTMLInputElement, TextInputProps>(
+  ({style, ...props}, ref) => {
+    return unstable_createElement('input', {
+      ...props,
+      ref,
+      type: 'date',
+      style: [
+        StyleSheet.flatten(style),
+        {
+          background: 'transparent',
+          border: 0,
+        },
+      ],
+    })
+  },
+)
+
+InputBase.displayName = 'InputBase'
+
+const Input = TextField.createInput(InputBase as unknown as typeof TextInput)
+
+export function DateField({
+  value,
+  onChangeDate,
+  label,
+  isInvalid,
+  testID,
+}: DateFieldProps) {
+  const handleOnChange = React.useCallback(
+    (e: any) => {
+      const date = e.target.valueAsDate || e.target.value
+
+      if (date) {
+        const formatted = toSimpleDateString(date)
+        onChangeDate(formatted)
+      }
+    },
+    [onChangeDate],
+  )
+
+  return (
+    <TextField.Root isInvalid={isInvalid}>
+      <Input
+        value={value}
+        label={label}
+        onChange={handleOnChange}
+        onChangeText={() => {}}
+        testID={testID}
+      />
+    </TextField.Root>
+  )
+}
@@ -0,0 +1,7 @@
+export type DateFieldProps = {
+  value: string
+  onChangeDate: (date: string) => void
+  label: string
+  isInvalid?: boolean
+  testID?: string
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M5 3a1 1 0 0 1 1 1v1.423c.498-.46 1.02-.869 1.58-1.213C8.863 3.423 10.302 3 12.028 3a9 9 0 1 1-8.487 12 1 1 0 0 1 1.885-.667A7 7 0 1 0 12.028 5c-1.37 0-2.444.327-3.402.915-.474.29-.93.652-1.383 1.085H9a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a8 8 0 1 0 4.21 14.804 1 1 0 0 1 1.054 1.7A9.958 9.958 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 1.104-.27 2.31-.949 3.243-.716.984-1.849 1.6-3.331 1.465a4.207 4.207 0 0 1-2.93-1.585c-.94 1.21-2.388 1.94-3.985 1.715-2.53-.356-4.04-2.91-3.682-5.458.358-2.547 2.514-4.586 5.044-4.23.905.127 1.68.536 2.286 1.126a1 1 0 0 1 1.964.368l-.515 3.545v.002a2.222 2.222 0 0 0 1.999 2.526c.75.068 1.212-.21 1.533-.65.358-.493.566-1.245.566-2.067a8 8 0 0 0-8-8Zm-.112 5.13c-1.195-.168-2.544.819-2.784 2.529-.24 1.71.784 3.03 1.98 3.198 1.195.168 2.543-.819 2.784-2.529.24-1.71-.784-3.03-1.98-3.198Z" clip-rule="evenodd"/></svg>