initial commit

.env

···
+PUBLIC_APP_NAME=Anartia
+
+PUBLIC_APPVIEW_URL=https://public.api.bsky.app

.gitignore

···
+node_modules
+
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+*.local
+.idea
+.DS_Store
+Thumbs.db
+
+vite.config.*.timestamp-*

.npmrc

···
+engine-strict=true

.prettierignore

···
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

···
+{
+	"trailingComma": "all",
+	"useTabs": true,
+	"tabWidth": 2,
+	"printWidth": 110,
+	"semi": true,
+	"singleQuote": true,
+	"bracketSpacing": true,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-css-order"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		},
+		{
+			"files": ["tsconfig.json", "jsconfig.json", "tsconfig.*.json"],
+			"options": {
+				"parser": "jsonc"
+			}
+		},
+		{
+			"files": ["*.md"],
+			"options": {
+				"printWidth": 100,
+				"proseWrap": "always"
+			}
+		}
+	]
+}

README.md

···
+# Anartia
+
+JavaScript-optional public web frontend for Bluesky.

package.json

···
+{
+	"private": true,
+	"name": "anartia",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-cloudflare": "^5.0.2",
+		"@sveltejs/kit": "^2.17.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"prettier": "^3.4.2",
+		"prettier-plugin-css-order": "^2.1.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"svelte": "^5.19.8",
+		"svelte-check": "^4.1.4",
+		"typescript": "~5.7.3",
+		"vite": "^6.1.0",
+		"wrangler": "^3.107.3"
+	},
+	"dependencies": {
+		"@atcute/bluesky": "^1.0.12",
+		"@atcute/bluesky-richtext-parser": "^1.0.7",
+		"@atcute/bluesky-richtext-segmenter": "^1.0.5",
+		"@atcute/client": "^2.0.7",
+		"@badrap/valita": "^0.4.2"
+	}
+}

pnpm-lock.yaml

···
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@atcute/bluesky':
+        specifier: ^1.0.12
+        version: 1.0.12(@atcute/client@2.0.7)
+      '@atcute/bluesky-richtext-parser':
+        specifier: ^1.0.7
+        version: 1.0.7
+      '@atcute/bluesky-richtext-segmenter':
+        specifier: ^1.0.5
+        version: 1.0.5(@atcute/bluesky@1.0.12(@atcute/client@2.0.7))(@atcute/client@2.0.7)
+      '@atcute/client':
+        specifier: ^2.0.7
+        version: 2.0.7
+      '@badrap/valita':
+        specifier: ^0.4.2
+        version: 0.4.2
+    devDependencies:
+      '@sveltejs/adapter-cloudflare':
+        specifier: ^5.0.2
+        version: 5.0.2(@sveltejs/kit@2.17.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.8)(vite@6.1.0))(svelte@5.19.8)(vite@6.1.0))(wrangler@3.107.3(@cloudflare/workers-types@4.20250204.0))
+      '@sveltejs/kit':
+        specifier: ^2.17.1
+        version: 2.17.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.8)(vite@6.1.0))(svelte@5.19.8)(vite@6.1.0)
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^5.0.3
+        version: 5.0.3(svelte@5.19.8)(vite@6.1.0)
+      prettier:
+        specifier: ^3.4.2
+        version: 3.4.2
+      prettier-plugin-css-order:
+        specifier: ^2.1.2
+        version: 2.1.2(postcss@8.5.1)(prettier@3.4.2)
+      prettier-plugin-svelte:
+        specifier: ^3.3.3
+        version: 3.3.3(prettier@3.4.2)(svelte@5.19.8)
+      svelte:
+        specifier: ^5.19.8
+        version: 5.19.8
+      svelte-check:
+        specifier: ^4.1.4
+        version: 4.1.4(svelte@5.19.8)(typescript@5.7.3)
+      typescript:
+        specifier: ~5.7.3
+        version: 5.7.3
+      vite:
+        specifier: ^6.1.0
+        version: 6.1.0
+      wrangler:
+        specifier: ^3.107.3
+        version: 3.107.3(@cloudflare/workers-types@4.20250204.0)
+
+packages:
+
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
+  '@atcute/bluesky-richtext-parser@1.0.7':
+    resolution: {integrity: sha512-nOvU699OXiGMbyswao7JJnY0C9WkwE7PVC/m5WWt0UN9fsXSOor9IZWw+v9SATp+94BTJoG38XyUomUaJnoQRA==}
+
+  '@atcute/bluesky-richtext-segmenter@1.0.5':
+    resolution: {integrity: sha512-D0FfmJVwppky9naL1OGKcQjtgO0lDLhkG4iCQHpShuHhEZ9FUdf3eUb/eQpVRNJGaJ4ShjEOHA6FlAizcjMkGQ==}
+    peerDependencies:
+      '@atcute/bluesky': ^1.0.0
+      '@atcute/client': ^1.0.0 || ^2.0.0
+
+  '@atcute/bluesky@1.0.12':
+    resolution: {integrity: sha512-oUM+MxD5asGYyQDOHBGay7f9ryhsBpQ8LTUmsEZvp4t/WG0ZV2AcFRWsG0DxB+CsmSTbP2DHLMZCatE3usmt+g==}
+    peerDependencies:
+      '@atcute/client': ^1.0.0 || ^2.0.0
+
+  '@atcute/client@2.0.7':
+    resolution: {integrity: sha512-bvNahrCGvhZw/EIx0HU/GOoKZEnUaAppbuZh7cu+VsOFA2tdFLnZJed9Hagh5Yz/eUX7QUh5NB4dRTRUdggSLQ==}
+
+  '@badrap/valita@0.4.2':
+    resolution: {integrity: sha512-Mwmr7k2iK0Yy0POLnAFUgab2mxKYeIsYXHY7sg3jo8XFsFHbG0SBmTcktXD0uW8N4WZePKf8s68QV7QDTGSdHA==}
+    engines: {node: '>= 18'}
+
+  '@cloudflare/kv-asset-handler@0.3.4':
+    resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
+    engines: {node: '>=16.13'}
+
+  '@cloudflare/workerd-darwin-64@1.20250129.0':
+    resolution: {integrity: sha512-M+xETVnl+xy2dfDDWmp0XXr2rttl70a6bljQygl0EmYmNswFTcYbQWCaBuNBo9kabU59rLKr4a/b3QZ07NoL/g==}
+    engines: {node: '>=16'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@cloudflare/workerd-darwin-arm64@1.20250129.0':
+    resolution: {integrity: sha512-c4PQUyIMp+bCMxZkAMBzXgTHjRZxeYCujDbb3staestqgRbenzcfauXsMd6np35ng+EE1uBgHNPV4+7fC0ZBfg==}
+    engines: {node: '>=16'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@cloudflare/workerd-linux-64@1.20250129.0':
+    resolution: {integrity: sha512-xJx8LwWFxsm5U3DETJwRuOmT5RWBqm4FmA4itYXvcEICca9pWJDB641kT4PnpypwDNmYOebhU7A+JUrCRucG0w==}
+    engines: {node: '>=16'}
+    cpu: [x64]
+    os: [linux]
+
+  '@cloudflare/workerd-linux-arm64@1.20250129.0':
+    resolution: {integrity: sha512-dR//npbaX5p323huBVNIy5gaWubQx6CC3aiXeK0yX4aD5ar8AjxQFb2U/Sgjeo65Rkt53hJWqC7IwRpK/eOxrA==}
+    engines: {node: '>=16'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@cloudflare/workerd-windows-64@1.20250129.0':
+    resolution: {integrity: sha512-OeO+1nPj/ocAE3adFar/tRFGRkbCrBnrOYXq0FUBSpyNHpDdA9/U3PAw5CN4zvjfTnqXZfTxTFeqoruqzRzbtg==}
+    engines: {node: '>=16'}
+    cpu: [x64]
+    os: [win32]
+
+  '@cloudflare/workers-types@4.20250204.0':
+    resolution: {integrity: sha512-mWoQbYaP+nYztx9I7q9sgaiNlT54Cypszz0RfzMxYnT5W3NXDuwGcjGB+5B5H5VB8tEC2dYnBRpa70lX94ueaQ==}
+
+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+
+  '@esbuild-plugins/node-globals-polyfill@0.2.3':
+    resolution: {integrity: sha512-r3MIryXDeXDOZh7ih1l/yE9ZLORCd5e8vWg02azWRGj5SPTuoh69A2AIyn0Z31V/kHBfZ4HgWJ+OK3GTTwLmnw==}
+    peerDependencies:
+      esbuild: '*'
+
+  '@esbuild-plugins/node-modules-polyfill@0.2.2':
+    resolution: {integrity: sha512-LXV7QsWJxRuMYvKbiznh+U1ilIop3g2TeKRzUxOG5X3YITc8JyyTa90BmLwqqv0YnX4v32CSlG+vsziZp9dMvA==}
+    peerDependencies:
+      esbuild: '*'
+
+  '@esbuild/aix-ppc64@0.24.2':
+    resolution: {integrity: sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.17.19':
+    resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.24.2':
+    resolution: {integrity: sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.17.19':
+    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.24.2':
+    resolution: {integrity: sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.17.19':
+    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.24.2':
+    resolution: {integrity: sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.17.19':
+    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.24.2':
+    resolution: {integrity: sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.17.19':
+    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.24.2':
+    resolution: {integrity: sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.17.19':
+    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.24.2':
+    resolution: {integrity: sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.17.19':
+    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.24.2':
+    resolution: {integrity: sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.17.19':
+    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.24.2':
+    resolution: {integrity: sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.17.19':
+    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.24.2':
+    resolution: {integrity: sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.17.19':
+    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.24.2':
+    resolution: {integrity: sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.17.19':
+    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.24.2':
+    resolution: {integrity: sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.17.19':
+    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.24.2':
+    resolution: {integrity: sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.17.19':
+    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.24.2':
+    resolution: {integrity: sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.17.19':
+    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.24.2':
+    resolution: {integrity: sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.17.19':
+    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.24.2':
+    resolution: {integrity: sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.17.19':
+    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.24.2':
+    resolution: {integrity: sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.24.2':
+    resolution: {integrity: sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.17.19':
+    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.24.2':
+    resolution: {integrity: sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.24.2':
+    resolution: {integrity: sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.17.19':
+    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.24.2':
+    resolution: {integrity: sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/sunos-x64@0.17.19':
+    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.24.2':
+    resolution: {integrity: sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.17.19':
+    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.24.2':
+    resolution: {integrity: sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.17.19':
+    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.24.2':
+    resolution: {integrity: sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.17.19':
+    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.24.2':
+    resolution: {integrity: sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@fastify/busboy@2.1.1':
+    resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
+    engines: {node: '>=14'}
+
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
+  '@polka/url@1.0.0-next.28':
+    resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
+
+  '@rollup/rollup-android-arm-eabi@4.34.4':
+    resolution: {integrity: sha512-gGi5adZWvjtJU7Axs//CWaQbQd/vGy8KGcnEaCWiyCqxWYDxwIlAHFuSe6Guoxtd0SRvSfVTDMPd5H+4KE2kKA==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.34.4':
+    resolution: {integrity: sha512-1aRlh1gqtF7vNPMnlf1vJKk72Yshw5zknR/ZAVh7zycRAGF2XBMVDAHmFQz/Zws5k++nux3LOq/Ejj1WrDR6xg==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.34.4':
+    resolution: {integrity: sha512-drHl+4qhFj+PV/jrQ78p9ch6A0MfNVZScl/nBps5a7u01aGf/GuBRrHnRegA9bP222CBDfjYbFdjkIJ/FurvSQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.34.4':
+    resolution: {integrity: sha512-hQqq/8QALU6t1+fbNmm6dwYsa0PDD4L5r3TpHx9dNl+aSEMnIksHZkSO3AVH+hBMvZhpumIGrTFj8XCOGuIXjw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.34.4':
+    resolution: {integrity: sha512-/L0LixBmbefkec1JTeAQJP0ETzGjFtNml2gpQXA8rpLo7Md+iXQzo9kwEgzyat5Q+OG/C//2B9Fx52UxsOXbzw==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.34.4':
+    resolution: {integrity: sha512-6Rk3PLRK+b8L/M6m/x6Mfj60LhAUcLJ34oPaxufA+CfqkUrDoUPQYFdRrhqyOvtOKXLJZJwxlOLbQjNYQcRQfw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.4':
+    resolution: {integrity: sha512-kmT3x0IPRuXY/tNoABp2nDvI9EvdiS2JZsd4I9yOcLCCViKsP0gB38mVHOhluzx+SSVnM1KNn9k6osyXZhLoCA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.34.4':
+    resolution: {integrity: sha512-3iSA9tx+4PZcJH/Wnwsvx/BY4qHpit/u2YoZoXugWVfc36/4mRkgGEoRbRV7nzNBSCOgbWMeuQ27IQWgJ7tRzw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.34.4':
+    resolution: {integrity: sha512-7CwSJW+sEhM9sESEk+pEREF2JL0BmyCro8UyTq0Kyh0nu1v0QPNY3yfLPFKChzVoUmaKj8zbdgBxUhBRR+xGxg==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.34.4':
+    resolution: {integrity: sha512-GZdafB41/4s12j8Ss2izofjeFXRAAM7sHCb+S4JsI9vaONX/zQ8cXd87B9MRU/igGAJkKvmFmJJBeeT9jJ5Cbw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.4':
+    resolution: {integrity: sha512-uuphLuw1X6ur11675c2twC6YxbzyLSpWggvdawTUamlsoUv81aAXRMPBC1uvQllnBGls0Qt5Siw8reSIBnbdqQ==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.4':
+    resolution: {integrity: sha512-KvLEw1os2gSmD6k6QPCQMm2T9P2GYvsMZMRpMz78QpSoEevHbV/KOUbI/46/JRalhtSAYZBYLAnT9YE4i/l4vg==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.34.4':
+    resolution: {integrity: sha512-wcpCLHGM9yv+3Dql/CI4zrY2mpQ4WFergD3c9cpRowltEh5I84pRT/EuHZsG0In4eBPPYthXnuR++HrFkeqwkA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.34.4':
+    resolution: {integrity: sha512-nLbfQp2lbJYU8obhRQusXKbuiqm4jSJteLwfjnunDT5ugBKdxqw1X9KWwk8xp1OMC6P5d0WbzxzhWoznuVK6XA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.34.4':
+    resolution: {integrity: sha512-JGejzEfVzqc/XNiCKZj14eb6s5w8DdWlnQ5tWUbs99kkdvfq9btxxVX97AaxiUX7xJTKFA0LwoS0KU8C2faZRg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.34.4':
+    resolution: {integrity: sha512-/iFIbhzeyZZy49ozAWJ1ZR2KW6ZdYUbQXLT4O5n1cRZRoTpwExnHLjlurDXXPKEGxiAg0ujaR9JDYKljpr2fDg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-win32-arm64-msvc@4.34.4':
+    resolution: {integrity: sha512-qORc3UzoD5UUTneiP2Afg5n5Ti1GAW9Gp5vHPxzvAFFA3FBaum9WqGvYXGf+c7beFdOKNos31/41PRMUwh1tpA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.34.4':
+    resolution: {integrity: sha512-5g7E2PHNK2uvoD5bASBD9aelm44nf1w4I5FEI7MPHLWcCSrR8JragXZWgKPXk5i2FU3JFfa6CGZLw2RrGBHs2Q==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.34.4':
+    resolution: {integrity: sha512-p0scwGkR4kZ242xLPBuhSckrJ734frz6v9xZzD+kHVYRAkSUmdSLCIJRfql6H5//aF8Q10K+i7q8DiPfZp0b7A==}
+    cpu: [x64]
+    os: [win32]
+
+  '@sveltejs/adapter-cloudflare@5.0.2':
+    resolution: {integrity: sha512-jlNRYFQ5mfmHmBqF79GhbFty/BTU+HZvgaT1uDREQmUcngT5j8yV85pxCOORl1r7rIVd0silRNBD5RJFsU5UUg==}
+    peerDependencies:
+      '@sveltejs/kit': ^2.0.0
+      wrangler: ^3.87.0
+
+  '@sveltejs/kit@2.17.1':
+    resolution: {integrity: sha512-CpoGSLqE2MCmcQwA2CWJvOsZ9vW+p/1H3itrFykdgajUNAEyQPbsaSn7fZb6PLHQwe+07njxje9ss0fjZoCAyw==}
+    engines: {node: '>=18.13'}
+    hasBin: true
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1 || ^5.0.0
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      vite: ^5.0.3 || ^6.0.0
+
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1':
+    resolution: {integrity: sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^5.0.0
+      svelte: ^5.0.0
+      vite: ^6.0.0
+
+  '@sveltejs/vite-plugin-svelte@5.0.3':
+    resolution: {integrity: sha512-MCFS6CrQDu1yGwspm4qtli0e63vaPCehf6V7pIMP15AsWgMKrqDGCPFF/0kn4SP0ii4aySu4Pa62+fIRGFMjgw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+    peerDependencies:
+      svelte: ^5.0.0
+      vite: ^6.0.0
+
+  '@types/cookie@0.6.0':
+    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
+
+  '@types/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+
+  acorn-typescript@1.4.13:
+    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
+    peerDependencies:
+      acorn: '>=8.9.0'
+
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  as-table@1.0.55:
+    resolution: {integrity: sha512-xvsWESUJn0JN421Xb9MQw6AsMHRCUknCe0Wjlxvjud80mU4E6hQf1A6NzQKcYNmYw62MfzEtXc+badstZP3JpQ==}
+
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  blake3-wasm@2.1.5:
+    resolution: {integrity: sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g==}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  cookie@0.6.0:
+    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
+    engines: {node: '>= 0.6'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  css-declaration-sorter@7.2.0:
+    resolution: {integrity: sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.0.9
+
+  data-uri-to-buffer@2.0.2:
+    resolution: {integrity: sha512-ND9qDTLc6diwj+Xe5cdAgVTbLVdXbtxTJRXRhli8Mowuaan+0EJOtdqJ0QCHNSSPyoXGx9HX2/VMnKeC34AChA==}
+
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
+  devalue@5.1.1:
+    resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
+
+  esbuild@0.17.19:
+    resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  esbuild@0.24.2:
+    resolution: {integrity: sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
+  esrap@1.4.3:
+    resolution: {integrity: sha512-Xddc1RsoFJ4z9nR7W7BFaEPIp4UXoeQ0+077UdWLxbafMQFyU79sQJMk7kxNgRwQ9/aVgaKacCHC2pUACGwmYw==}
+
+  estree-walker@0.6.1:
+    resolution: {integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==}
+
+  exit-hook@2.2.1:
+    resolution: {integrity: sha512-eNTPlAD67BmP31LDINZ3U7HSF8l57TxOY2PmBJ1shpCvpnxBF93mWCE8YHBnXs8qiUZJc9WDcWIeC3a2HIAMfw==}
+    engines: {node: '>=6'}
+
+  fdir@6.4.3:
+    resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  get-source@2.0.12:
+    resolution: {integrity: sha512-X5+4+iD+HoSeEED+uwrQ07BOQr0kEDFMVqqpBuI+RaZBpBpHCuXxo70bjar6f0b0u/DQJsJ7ssurpP0V60Az+w==}
+
+  glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+
+  import-meta-resolve@4.1.0:
+    resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
+
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+
+  magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
+  mime@3.0.0:
+    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
+  miniflare@3.20250129.0:
+    resolution: {integrity: sha512-qYlGEjMl/2kJdgNaztj4hpA64d6Dl79Lx/NL61p/v5XZRiWanBOTgkQqdPxCKZOj6KQnioqhC7lfd6jDXKSs2A==}
+    engines: {node: '>=16.13'}
+    hasBin: true
+
+  mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
+  mrmime@2.0.0:
+    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
+    engines: {node: '>=10'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mustache@4.2.0:
+    resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
+    hasBin: true
+
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  ohash@1.1.4:
+    resolution: {integrity: sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==}
+
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  pathe@2.0.2:
+    resolution: {integrity: sha512-15Ztpk+nov8DR524R4BF7uEuzESgzUEAV4Ah7CUMNGXdE5ELuvxElxGXndBl32vMSsWa1jpNf22Z+Er3sKwq+w==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  postcss-less@6.0.0:
+    resolution: {integrity: sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      postcss: ^8.3.5
+
+  postcss-scss@4.0.9:
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
+
+  postcss@8.5.1:
+    resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prettier-plugin-css-order@2.1.2:
+    resolution: {integrity: sha512-vomxPjHI6pOMYcBuouSJHxxQClJXaUpU9rsV9IAO2wrSTZILRRlrxAAR8t9UF6wtczLkLfNRFUwM+ZbGXOONUA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      prettier: 3.x
+
+  prettier-plugin-svelte@3.3.3:
+    resolution: {integrity: sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==}
+    peerDependencies:
+      prettier: ^3.0.0
+      svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
+
+  prettier@3.4.2:
+    resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  printable-characters@1.0.42:
+    resolution: {integrity: sha512-dKp+C4iXWK4vVYZmYSd0KBH5F/h1HoZRsbJ82AVKRO3PEo8L4lBS/vLwhVtpwwuYcoIsVY+1JYKR268yn480uQ==}
+
+  readdirp@4.1.1:
+    resolution: {integrity: sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==}
+    engines: {node: '>= 14.18.0'}
+
+  regexparam@3.0.0:
+    resolution: {integrity: sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==}
+    engines: {node: '>=8'}
+
+  rollup-plugin-inject@3.0.2:
+    resolution: {integrity: sha512-ptg9PQwzs3orn4jkgXJ74bfs5vYz1NCZlSQMBUA0wKcGp5i5pA1AO3fOUEte8enhGUC+iapTCzEWw2jEFFUO/w==}
+    deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
+
+  rollup-plugin-node-polyfills@0.2.1:
+    resolution: {integrity: sha512-4kCrKPTJ6sK4/gLL/U5QzVT8cxJcofO0OU74tnB19F40cmuAKSzH5/siithxlofFEjwvw1YAhPmbvGNA6jEroA==}
+
+  rollup-pluginutils@2.8.2:
+    resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==}
+
+  rollup@4.34.4:
+    resolution: {integrity: sha512-spF66xoyD7rz3o08sHP7wogp1gZ6itSq22SGa/IZTcUDXDlOyrShwMwkVSB+BUxFRZZCUYqdb3KWDEOMVQZxuw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+
+  set-cookie-parser@2.7.1:
+    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+
+  sirv@3.0.0:
+    resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
+    engines: {node: '>=18'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+
+  stacktracey@2.1.8:
+    resolution: {integrity: sha512-Kpij9riA+UNg7TnphqjH7/CzctQ/owJGNbFkfEeve4Z4uxT5+JapVLFXcsurIfN34gnTWZNJ/f7NMG0E8JDzTw==}
+
+  stoppable@1.1.0:
+    resolution: {integrity: sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==}
+    engines: {node: '>=4', npm: '>=6'}
+
+  svelte-check@4.1.4:
+    resolution: {integrity: sha512-v0j7yLbT29MezzaQJPEDwksybTE2Ups9rUxEXy92T06TiA0cbqcO8wAOwNUVkFW6B0hsYHA+oAX3BS8b/2oHtw==}
+    engines: {node: '>= 18.0.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      typescript: '>=5.0.0'
+
+  svelte@5.19.8:
+    resolution: {integrity: sha512-56Vd/nwJrljV0w7RCV1A8sB4/yjSbWW5qrGDTAzp7q42OxwqEWT+6obWzDt41tHjIW+C9Fs2ygtejjJrXR+ZPA==}
+    engines: {node: '>=18'}
+
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
+
+  undici@5.28.5:
+    resolution: {integrity: sha512-zICwjrDrcrUE0pyyJc1I2QzBkLM8FINsgOrt6WjA+BgajVq9Nxu2PbFFXUrAggLfDXlZGZBVZYw7WNV5KiBiBA==}
+    engines: {node: '>=14.0'}
+
+  unenv@2.0.0-rc.1:
+    resolution: {integrity: sha512-PU5fb40H8X149s117aB4ytbORcCvlASdtF97tfls4BPIyj4PeVxvpSuy1jAptqYHqB0vb2w2sHvzM0XWcp2OKg==}
+
+  vite@6.1.0:
+    resolution: {integrity: sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitefu@1.0.5:
+    resolution: {integrity: sha512-h4Vflt9gxODPFNGPwp4zAMZRpZR7eslzwH2c5hn5kNZ5rhnKyRJ50U+yGCdc2IRaBs8O4haIgLNGrV5CrpMsCA==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  workerd@1.20250129.0:
+    resolution: {integrity: sha512-Rprz8rxKTF4l6q/nYYI07lBetJnR19mGipx+u/a27GZOPKMG5SLIzA2NciZlJaB2Qd5YY+4p/eHOeKqo5keVWA==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  worktop@0.8.0-next.18:
+    resolution: {integrity: sha512-+TvsA6VAVoMC3XDKR5MoC/qlLqDixEfOBysDEKnPIPou/NvoPWCAuXHXMsswwlvmEuvX56lQjvELLyLuzTKvRw==}
+    engines: {node: '>=12'}
+
+  wrangler@3.107.3:
+    resolution: {integrity: sha512-N9ZMDHZ+DI5/B0yclr3bG57U/Zw7wSzGdpO2l7j6+3q8yUf+4Fk0Rvneo2t8rjLewKlvqgt9D9siFuo8MXJ55Q==}
+    engines: {node: '>=16.17.0'}
+    hasBin: true
+    peerDependencies:
+      '@cloudflare/workers-types': ^4.20250129.0
+    peerDependenciesMeta:
+      '@cloudflare/workers-types':
+        optional: true
+
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  youch@3.3.4:
+    resolution: {integrity: sha512-UeVBXie8cA35DS6+nBkls68xaBBXCye0CNznrhszZjTbRVnJKQuNsyLKBTTL4ln1o1rh2PKtv35twV7irj5SEg==}
+
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+
+snapshots:
+
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@atcute/bluesky-richtext-parser@1.0.7': {}
+
+  '@atcute/bluesky-richtext-segmenter@1.0.5(@atcute/bluesky@1.0.12(@atcute/client@2.0.7))(@atcute/client@2.0.7)':
+    dependencies:
+      '@atcute/bluesky': 1.0.12(@atcute/client@2.0.7)
+      '@atcute/client': 2.0.7
+
+  '@atcute/bluesky@1.0.12(@atcute/client@2.0.7)':
+    dependencies:
+      '@atcute/client': 2.0.7
+
+  '@atcute/client@2.0.7': {}
+
+  '@badrap/valita@0.4.2': {}
+
+  '@cloudflare/kv-asset-handler@0.3.4':
+    dependencies:
+      mime: 3.0.0
+
+  '@cloudflare/workerd-darwin-64@1.20250129.0':
+    optional: true
+
+  '@cloudflare/workerd-darwin-arm64@1.20250129.0':
+    optional: true
+
+  '@cloudflare/workerd-linux-64@1.20250129.0':
+    optional: true
+
+  '@cloudflare/workerd-linux-arm64@1.20250129.0':
+    optional: true
+
+  '@cloudflare/workerd-windows-64@1.20250129.0':
+    optional: true
+
+  '@cloudflare/workers-types@4.20250204.0': {}
+
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+
+  '@esbuild-plugins/node-globals-polyfill@0.2.3(esbuild@0.17.19)':
+    dependencies:
+      esbuild: 0.17.19
+
+  '@esbuild-plugins/node-modules-polyfill@0.2.2(esbuild@0.17.19)':
+    dependencies:
+      esbuild: 0.17.19
+      escape-string-regexp: 4.0.0
+      rollup-plugin-node-polyfills: 0.2.1
+
+  '@esbuild/aix-ppc64@0.24.2':
+    optional: true
+
+  '@esbuild/android-arm64@0.17.19':
+    optional: true
+
+  '@esbuild/android-arm64@0.24.2':
+    optional: true
+
+  '@esbuild/android-arm@0.17.19':
+    optional: true
+
+  '@esbuild/android-arm@0.24.2':
+    optional: true
+
+  '@esbuild/android-x64@0.17.19':
+    optional: true
+
+  '@esbuild/android-x64@0.24.2':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.17.19':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.24.2':
+    optional: true
+
+  '@esbuild/darwin-x64@0.17.19':
+    optional: true
+
+  '@esbuild/darwin-x64@0.24.2':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.17.19':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.24.2':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.17.19':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.24.2':
+    optional: true
+
+  '@esbuild/linux-arm64@0.17.19':
+    optional: true
+
+  '@esbuild/linux-arm64@0.24.2':
+    optional: true
+
+  '@esbuild/linux-arm@0.17.19':
+    optional: true
+
+  '@esbuild/linux-arm@0.24.2':
+    optional: true
+
+  '@esbuild/linux-ia32@0.17.19':
+    optional: true
+
+  '@esbuild/linux-ia32@0.24.2':
+    optional: true
+
+  '@esbuild/linux-loong64@0.17.19':
+    optional: true
+
+  '@esbuild/linux-loong64@0.24.2':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.17.19':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.24.2':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.17.19':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.24.2':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.17.19':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.24.2':
+    optional: true
+
+  '@esbuild/linux-s390x@0.17.19':
+    optional: true
+
+  '@esbuild/linux-s390x@0.24.2':
+    optional: true
+
+  '@esbuild/linux-x64@0.17.19':
+    optional: true
+
+  '@esbuild/linux-x64@0.24.2':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.24.2':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.17.19':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.24.2':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.24.2':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.17.19':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.24.2':
+    optional: true
+
+  '@esbuild/sunos-x64@0.17.19':
+    optional: true
+
+  '@esbuild/sunos-x64@0.24.2':
+    optional: true
+
+  '@esbuild/win32-arm64@0.17.19':
+    optional: true
+
+  '@esbuild/win32-arm64@0.24.2':
+    optional: true
+
+  '@esbuild/win32-ia32@0.17.19':
+    optional: true
+
+  '@esbuild/win32-ia32@0.24.2':
+    optional: true
+
+  '@esbuild/win32-x64@0.17.19':
+    optional: true
+
+  '@esbuild/win32-x64@0.24.2':
+    optional: true
+
+  '@fastify/busboy@2.1.1': {}
+
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@polka/url@1.0.0-next.28': {}
+
+  '@rollup/rollup-android-arm-eabi@4.34.4':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.34.4':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.34.4':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.34.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.34.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.34.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.34.4':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.34.4':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.34.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.34.4':
+    optional: true
+
+  '@sveltejs/adapter-cloudflare@5.0.2(@sveltejs/kit@2.17.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.8)(vite@6.1.0))(svelte@5.19.8)(vite@6.1.0))(wrangler@3.107.3(@cloudflare/workers-types@4.20250204.0))':
+    dependencies:
+      '@cloudflare/workers-types': 4.20250204.0
+      '@sveltejs/kit': 2.17.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.8)(vite@6.1.0))(svelte@5.19.8)(vite@6.1.0)
+      esbuild: 0.24.2
+      worktop: 0.8.0-next.18
+      wrangler: 3.107.3(@cloudflare/workers-types@4.20250204.0)
+
+  '@sveltejs/kit@2.17.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.8)(vite@6.1.0))(svelte@5.19.8)(vite@6.1.0)':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.19.8)(vite@6.1.0)
+      '@types/cookie': 0.6.0
+      cookie: 0.6.0
+      devalue: 5.1.1
+      esm-env: 1.2.2
+      import-meta-resolve: 4.1.0
+      kleur: 4.1.5
+      magic-string: 0.30.17
+      mrmime: 2.0.0
+      sade: 1.8.1
+      set-cookie-parser: 2.7.1
+      sirv: 3.0.0
+      svelte: 5.19.8
+      vite: 6.1.0
+
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.8)(vite@6.1.0))(svelte@5.19.8)(vite@6.1.0)':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.19.8)(vite@6.1.0)
+      debug: 4.4.0
+      svelte: 5.19.8
+      vite: 6.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.8)(vite@6.1.0)':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.8)(vite@6.1.0))(svelte@5.19.8)(vite@6.1.0)
+      debug: 4.4.0
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.17
+      svelte: 5.19.8
+      vite: 6.1.0
+      vitefu: 1.0.5(vite@6.1.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@types/cookie@0.6.0': {}
+
+  '@types/estree@1.0.6': {}
+
+  acorn-typescript@1.4.13(acorn@8.14.0):
+    dependencies:
+      acorn: 8.14.0
+
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.14.0
+
+  acorn@8.14.0: {}
+
+  aria-query@5.3.2: {}
+
+  as-table@1.0.55:
+    dependencies:
+      printable-characters: 1.0.42
+
+  axobject-query@4.1.0: {}
+
+  blake3-wasm@2.1.5: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.1
+
+  clsx@2.1.1: {}
+
+  confbox@0.1.8: {}
+
+  cookie@0.6.0: {}
+
+  cookie@0.7.2: {}
+
+  css-declaration-sorter@7.2.0(postcss@8.5.1):
+    dependencies:
+      postcss: 8.5.1
+
+  data-uri-to-buffer@2.0.2: {}
+
+  debug@4.4.0:
+    dependencies:
+      ms: 2.1.3
+
+  deepmerge@4.3.1: {}
+
+  defu@6.1.4: {}
+
+  devalue@5.1.1: {}
+
+  esbuild@0.17.19:
+    optionalDependencies:
+      '@esbuild/android-arm': 0.17.19
+      '@esbuild/android-arm64': 0.17.19
+      '@esbuild/android-x64': 0.17.19
+      '@esbuild/darwin-arm64': 0.17.19
+      '@esbuild/darwin-x64': 0.17.19
+      '@esbuild/freebsd-arm64': 0.17.19
+      '@esbuild/freebsd-x64': 0.17.19
+      '@esbuild/linux-arm': 0.17.19
+      '@esbuild/linux-arm64': 0.17.19
+      '@esbuild/linux-ia32': 0.17.19
+      '@esbuild/linux-loong64': 0.17.19
+      '@esbuild/linux-mips64el': 0.17.19
+      '@esbuild/linux-ppc64': 0.17.19
+      '@esbuild/linux-riscv64': 0.17.19
+      '@esbuild/linux-s390x': 0.17.19
+      '@esbuild/linux-x64': 0.17.19
+      '@esbuild/netbsd-x64': 0.17.19
+      '@esbuild/openbsd-x64': 0.17.19
+      '@esbuild/sunos-x64': 0.17.19
+      '@esbuild/win32-arm64': 0.17.19
+      '@esbuild/win32-ia32': 0.17.19
+      '@esbuild/win32-x64': 0.17.19
+
+  esbuild@0.24.2:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.24.2
+      '@esbuild/android-arm': 0.24.2
+      '@esbuild/android-arm64': 0.24.2
+      '@esbuild/android-x64': 0.24.2
+      '@esbuild/darwin-arm64': 0.24.2
+      '@esbuild/darwin-x64': 0.24.2
+      '@esbuild/freebsd-arm64': 0.24.2
+      '@esbuild/freebsd-x64': 0.24.2
+      '@esbuild/linux-arm': 0.24.2
+      '@esbuild/linux-arm64': 0.24.2
+      '@esbuild/linux-ia32': 0.24.2
+      '@esbuild/linux-loong64': 0.24.2
+      '@esbuild/linux-mips64el': 0.24.2
+      '@esbuild/linux-ppc64': 0.24.2
+      '@esbuild/linux-riscv64': 0.24.2
+      '@esbuild/linux-s390x': 0.24.2
+      '@esbuild/linux-x64': 0.24.2
+      '@esbuild/netbsd-arm64': 0.24.2
+      '@esbuild/netbsd-x64': 0.24.2
+      '@esbuild/openbsd-arm64': 0.24.2
+      '@esbuild/openbsd-x64': 0.24.2
+      '@esbuild/sunos-x64': 0.24.2
+      '@esbuild/win32-arm64': 0.24.2
+      '@esbuild/win32-ia32': 0.24.2
+      '@esbuild/win32-x64': 0.24.2
+
+  escape-string-regexp@4.0.0: {}
+
+  esm-env@1.2.2: {}
+
+  esrap@1.4.3:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  estree-walker@0.6.1: {}
+
+  exit-hook@2.2.1: {}
+
+  fdir@6.4.3: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  get-source@2.0.12:
+    dependencies:
+      data-uri-to-buffer: 2.0.2
+      source-map: 0.6.1
+
+  glob-to-regexp@0.4.1: {}
+
+  import-meta-resolve@4.1.0: {}
+
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.6
+
+  kleur@4.1.5: {}
+
+  locate-character@3.0.0: {}
+
+  magic-string@0.25.9:
+    dependencies:
+      sourcemap-codec: 1.4.8
+
+  magic-string@0.30.17:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  mime@3.0.0: {}
+
+  miniflare@3.20250129.0:
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
+      exit-hook: 2.2.1
+      glob-to-regexp: 0.4.1
+      stoppable: 1.1.0
+      undici: 5.28.5
+      workerd: 1.20250129.0
+      ws: 8.18.0
+      youch: 3.3.4
+      zod: 3.24.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  mlly@1.7.4:
+    dependencies:
+      acorn: 8.14.0
+      pathe: 2.0.2
+      pkg-types: 1.3.1
+      ufo: 1.5.4
+
+  mri@1.2.0: {}
+
+  mrmime@2.0.0: {}
+
+  ms@2.1.3: {}
+
+  mustache@4.2.0: {}
+
+  nanoid@3.3.8: {}
+
+  ohash@1.1.4: {}
+
+  path-to-regexp@6.3.0: {}
+
+  pathe@1.1.2: {}
+
+  pathe@2.0.2: {}
+
+  picocolors@1.1.1: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.7.4
+      pathe: 2.0.2
+
+  postcss-less@6.0.0(postcss@8.5.1):
+    dependencies:
+      postcss: 8.5.1
+
+  postcss-scss@4.0.9(postcss@8.5.1):
+    dependencies:
+      postcss: 8.5.1
+
+  postcss@8.5.1:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prettier-plugin-css-order@2.1.2(postcss@8.5.1)(prettier@3.4.2):
+    dependencies:
+      css-declaration-sorter: 7.2.0(postcss@8.5.1)
+      postcss-less: 6.0.0(postcss@8.5.1)
+      postcss-scss: 4.0.9(postcss@8.5.1)
+      prettier: 3.4.2
+    transitivePeerDependencies:
+      - postcss
+
+  prettier-plugin-svelte@3.3.3(prettier@3.4.2)(svelte@5.19.8):
+    dependencies:
+      prettier: 3.4.2
+      svelte: 5.19.8
+
+  prettier@3.4.2: {}
+
+  printable-characters@1.0.42: {}
+
+  readdirp@4.1.1: {}
+
+  regexparam@3.0.0: {}
+
+  rollup-plugin-inject@3.0.2:
+    dependencies:
+      estree-walker: 0.6.1
+      magic-string: 0.25.9
+      rollup-pluginutils: 2.8.2
+
+  rollup-plugin-node-polyfills@0.2.1:
+    dependencies:
+      rollup-plugin-inject: 3.0.2
+
+  rollup-pluginutils@2.8.2:
+    dependencies:
+      estree-walker: 0.6.1
+
+  rollup@4.34.4:
+    dependencies:
+      '@types/estree': 1.0.6
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.34.4
+      '@rollup/rollup-android-arm64': 4.34.4
+      '@rollup/rollup-darwin-arm64': 4.34.4
+      '@rollup/rollup-darwin-x64': 4.34.4
+      '@rollup/rollup-freebsd-arm64': 4.34.4
+      '@rollup/rollup-freebsd-x64': 4.34.4
+      '@rollup/rollup-linux-arm-gnueabihf': 4.34.4
+      '@rollup/rollup-linux-arm-musleabihf': 4.34.4
+      '@rollup/rollup-linux-arm64-gnu': 4.34.4
+      '@rollup/rollup-linux-arm64-musl': 4.34.4
+      '@rollup/rollup-linux-loongarch64-gnu': 4.34.4
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.4
+      '@rollup/rollup-linux-riscv64-gnu': 4.34.4
+      '@rollup/rollup-linux-s390x-gnu': 4.34.4
+      '@rollup/rollup-linux-x64-gnu': 4.34.4
+      '@rollup/rollup-linux-x64-musl': 4.34.4
+      '@rollup/rollup-win32-arm64-msvc': 4.34.4
+      '@rollup/rollup-win32-ia32-msvc': 4.34.4
+      '@rollup/rollup-win32-x64-msvc': 4.34.4
+      fsevents: 2.3.3
+
+  sade@1.8.1:
+    dependencies:
+      mri: 1.2.0
+
+  set-cookie-parser@2.7.1: {}
+
+  sirv@3.0.0:
+    dependencies:
+      '@polka/url': 1.0.0-next.28
+      mrmime: 2.0.0
+      totalist: 3.0.1
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1: {}
+
+  sourcemap-codec@1.4.8: {}
+
+  stacktracey@2.1.8:
+    dependencies:
+      as-table: 1.0.55
+      get-source: 2.0.12
+
+  stoppable@1.1.0: {}
+
+  svelte-check@4.1.4(svelte@5.19.8)(typescript@5.7.3):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      chokidar: 4.0.3
+      fdir: 6.4.3
+      picocolors: 1.1.1
+      sade: 1.8.1
+      svelte: 5.19.8
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - picomatch
+
+  svelte@5.19.8:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.6
+      acorn: 8.14.0
+      acorn-typescript: 1.4.13(acorn@8.14.0)
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      esm-env: 1.2.2
+      esrap: 1.4.3
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.17
+      zimmerframe: 1.1.2
+
+  totalist@3.0.1: {}
+
+  typescript@5.7.3: {}
+
+  ufo@1.5.4: {}
+
+  undici@5.28.5:
+    dependencies:
+      '@fastify/busboy': 2.1.1
+
+  unenv@2.0.0-rc.1:
+    dependencies:
+      defu: 6.1.4
+      mlly: 1.7.4
+      ohash: 1.1.4
+      pathe: 1.1.2
+      ufo: 1.5.4
+
+  vite@6.1.0:
+    dependencies:
+      esbuild: 0.24.2
+      postcss: 8.5.1
+      rollup: 4.34.4
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  vitefu@1.0.5(vite@6.1.0):
+    optionalDependencies:
+      vite: 6.1.0
+
+  workerd@1.20250129.0:
+    optionalDependencies:
+      '@cloudflare/workerd-darwin-64': 1.20250129.0
+      '@cloudflare/workerd-darwin-arm64': 1.20250129.0
+      '@cloudflare/workerd-linux-64': 1.20250129.0
+      '@cloudflare/workerd-linux-arm64': 1.20250129.0
+      '@cloudflare/workerd-windows-64': 1.20250129.0
+
+  worktop@0.8.0-next.18:
+    dependencies:
+      mrmime: 2.0.0
+      regexparam: 3.0.0
+
+  wrangler@3.107.3(@cloudflare/workers-types@4.20250204.0):
+    dependencies:
+      '@cloudflare/kv-asset-handler': 0.3.4
+      '@esbuild-plugins/node-globals-polyfill': 0.2.3(esbuild@0.17.19)
+      '@esbuild-plugins/node-modules-polyfill': 0.2.2(esbuild@0.17.19)
+      blake3-wasm: 2.1.5
+      esbuild: 0.17.19
+      miniflare: 3.20250129.0
+      path-to-regexp: 6.3.0
+      unenv: 2.0.0-rc.1
+      workerd: 1.20250129.0
+    optionalDependencies:
+      '@cloudflare/workers-types': 4.20250204.0
+      fsevents: 2.3.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  ws@8.18.0: {}
+
+  youch@3.3.4:
+    dependencies:
+      cookie: 0.7.2
+      mustache: 4.2.0
+      stacktracey: 2.1.8
+
+  zimmerframe@1.1.2: {}
+
+  zod@3.24.1: {}

src/app.d.ts

···
+import '@atcute/bluesky/lexicons';
+
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

···
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<style>
+			.sv-img-blurred {
+				scale: 125%;
+				filter: blur(4px);
+			}
+		</style>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" data-sveltekit-reload>
+		%sveltekit.body%
+	</body>
+</html>

src/lib/components/central-icons/arrows-repeat-right-left-outlined.svelte

···
+<svg class="sv-icon" fill="none" viewBox="0 0 24 24">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="m17 3 3 3-3 3M7 21l-3-3 3-3m-2 3h15v-5M4 11V6h15"
+	/>
+</svg>

src/lib/components/central-icons/bubble-2-outlined.svelte

···
+<svg class="sv-icon" fill="none" viewBox="0 0 24 24">
+	<path
+		stroke="currentColor"
+		stroke-linecap="square"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M3.002 4h18v14h-9l-5 3v-3h-4V4Z"
+	/>
+</svg>

src/lib/components/central-icons/dot-grid-1x3-horizontal-outlined.svelte

···
+<svg class="sv-icon" fill="none" viewBox="0 0 24 24">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM20 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM4 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+	/>
+</svg>

src/lib/components/central-icons/earth-outlined.svelte

···
+<svg class="sv-icon" fill="none" viewBox="0 0 24 24">
+	<path
+		fill="currentColor"
+		d="M14.922 16.865v1a1 1 0 0 0 .894-.553l-.894-.447Zm.973-1.946.894.447a1 1 0 0 0-.337-1.277l-.557.83Zm-2.869-1.928.558-.83a1 1 0 0 0-.494-.168l-.064.998Zm-1.89-.12.064-.998a1 1 0 0 0-.77.29l.706.708Zm-1.08 1.075-.705-.708a1 1 0 0 0-.126 1.263l.832-.555Zm1.947 2.919-.832.555a1 1 0 0 0 .832.445v-1ZM4.772 7.27a1 1 0 1 0-1.2 1.6l1.2-1.6Zm3.34 3.757-.601.8a1 1 0 0 0 1.493-.35l-.893-.45Zm.977-1.941-.244-.97a1 1 0 0 0-.65.52l.894.45Zm3.887-.978.244.97a1 1 0 0 0 .726-.727l-.97-.243Zm2.12-4.357a1 1 0 0 0-1.94-.485l1.94.485ZM20 12a8 8 0 0 1-8 8v2c5.523 0 10-4.477 10-10h-2Zm-8 8a8 8 0 0 1-8-8H2c0 5.523 4.477 10 10 10v-2Zm-8-8a8 8 0 0 1 8-8V2C6.477 2 2 6.477 2 12h2Zm8-8a8 8 0 0 1 8 8h2c0-5.523-4.477-10-10-10v2Zm3.816 13.312.973-1.946L15 14.472l-.973 1.946 1.79.894Zm.636-3.223-2.868-1.928-1.115 1.66 2.868 1.928 1.116-1.66Zm-3.362-2.096-1.89-.12-.128 1.996 1.89.12.128-1.996Zm-2.66.17-1.079 1.075 1.412 1.416 1.079-1.075-1.412-1.417ZM9.225 14.5l1.946 2.919 1.664-1.11-1.946-2.919-1.664 1.11Zm2.778 3.364h2.919v-2h-2.92v2ZM3.57 8.87l3.94 2.957 1.2-1.6-3.94-2.957-1.2 1.6Zm5.433 2.607.978-1.941-1.786-.9-.978 1.941 1.786.9Zm.329-1.421 3.887-.978-.488-1.94-3.887.978.488 1.94Zm4.613-1.705 1.15-4.6-1.94-.485-1.15 4.6 1.94.485Z"
+	/>
+</svg>

src/lib/components/central-icons/heart-outlined.svelte

···
+<svg class="sv-icon" fill="none" viewBox="0 0 24 24">
+	<path
+		stroke="currentColor"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M21 10c0 5.75-8.25 10-9 10s-9-4.25-9-10c0-4 2.5-6 5-6s4 1.5 4 1.5S13.5 4 16 4s5 2 5 6Z"
+	/>
+</svg>

src/lib/components/central-icons/pin-outlined.svelte

···
+<svg class="sv-icon" fill="none" viewBox="0 0 24 24">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="m4 20 4.5-4.5m3-8L14 3l7 7-4.5 2.5L14 20 4 10l7.5-2.5Z"
+	/>
+</svg>

src/lib/components/central-icons/play-solid.svelte

···
+<svg class="sv-icon" fill="none" viewBox="0 0 24 24">
+	<path
+		fill="currentColor"
+		d="M6.514 2.143A1 1 0 0 0 5 3v18a1 1 0 0 0 1.514.858l15-9a1 1 0 0 0 0-1.716l-15-9Z"
+	/>
+</svg>

src/lib/components/embeds/embeds.svelte

···
+<script lang="ts" module>
+	const collectionToLabel = (collection: string): string | null => {
+		switch (collection) {
+			case 'app.bsky.feed.post':
+				return 'post';
+			case 'app.bsky.feed.generator':
+				return 'feed';
+			case 'app.bsky.graph.list':
+				return 'list';
+			case 'app.bsky.graph.starterpack':
+				return 'starter pack';
+			case 'app.bsky.labeler.service':
+				return 'labeler';
+		}
+
+		return null;
+	};
+</script>
+
+<script lang="ts">
+	import type {
+		AppBskyEmbedExternal,
+		AppBskyEmbedImages,
+		AppBskyEmbedRecord,
+		AppBskyEmbedVideo,
+		AppBskyFeedDefs,
+		Brand,
+	} from '@atcute/client/lexicons';
+
+	import { parseAtUri } from '$lib/types/at-uri';
+
+	import ExternalEmbed from './external-embed.svelte';
+	import FeedEmbed from './feed-embed.svelte';
+	import ImageEmbed from './image-embed.svelte';
+	import ListEmbed from './list-embed.svelte';
+	import QuoteEmbed from './quote-embed.svelte';
+	import StarterpackEmbed from './starterpack-embed.svelte';
+	import VideoEmbed from './video-embed.svelte';
+
+	type Embed = NonNullable<AppBskyFeedDefs.PostView['embed']>;
+	type MediaEmbed = Brand.Union<AppBskyEmbedExternal.View | AppBskyEmbedImages.View | AppBskyEmbedVideo.View>;
+	type RecordEmbed = AppBskyEmbedRecord.View;
+
+	interface Props {
+		embed: Embed;
+		large?: boolean;
+	}
+
+	const { embed, large = false }: Props = $props();
+</script>
+
+<div class="embeds">
+	{#if embed.$type === 'app.bsky.embed.recordWithMedia#view'}
+		{@render Media(embed.media)}
+		{@render Record(embed.record)}
+	{:else if embed.$type === 'app.bsky.embed.record#view'}
+		{@render Record(embed)}
+	{:else}
+		{@render Media(embed)}
+	{/if}
+</div>
+
+{#snippet Media(embed: MediaEmbed)}
+	{#if embed.$type === 'app.bsky.embed.external#view'}
+		<ExternalEmbed {embed} />
+	{:else if embed.$type === 'app.bsky.embed.images#view'}
+		<ImageEmbed {embed} standalone />
+	{:else if embed.$type === 'app.bsky.embed.video#view'}
+		<VideoEmbed {embed} standalone />
+	{:else}
+		{@render Message(`Unsupported media embed`)}
+	{/if}
+{/snippet}
+
+{#snippet Record(embed: RecordEmbed)}
+	{@const record = embed.record}
+
+	{#if record.$type === 'app.bsky.embed.record#viewRecord'}
+		<QuoteEmbed embed={record} {large} />
+	{:else if record.$type === 'app.bsky.feed.defs#generatorView'}
+		<FeedEmbed embed={record} />
+	{:else if record.$type === 'app.bsky.graph.defs#listView'}
+		<ListEmbed embed={record} />
+	{:else if record.$type === 'app.bsky.graph.defs#starterPackViewBasic'}
+		<StarterpackEmbed embed={record} {large} />
+	{:else}
+		{@const uri = parseAtUri(record.uri)}
+		{@const resource = collectionToLabel(uri.collection)}
+
+		{@const isUnavailable =
+			resource &&
+			(record.$type === 'app.bsky.embed.record#viewNotFound' ||
+				record.$type === 'app.bsky.embed.record#viewBlocked' ||
+				record.$type === 'app.bsky.embed.record#viewDetached')}
+
+		{@render Message(isUnavailable ? `This ${resource} is unavailable` : `Unsupported record embed`)}
+	{/if}
+{/snippet}
+
+{#snippet Message(message: string)}
+	<div class="message">{message}</div>
+{/snippet}
+
+<style>
+	.embeds {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		margin: 12px 0 0 0;
+	}
+
+	.message {
+		border: 1px solid var(--divider-sm);
+		border-radius: 6px;
+		padding: 12px;
+		color: var(--text-blurb);
+	}
+</style>

src/lib/components/embeds/external-embed.svelte

···
+<script lang="ts" module>
+	const safeParseUrl = (str: string): URL | null => {
+		let url: URL | null | undefined;
+		if ('parse' in URL) {
+			url = URL.parse(str);
+		} else {
+			try {
+				// @ts-expect-error: `'parse' in URL` is giving truthy
+				url = new URL(str);
+			} catch {}
+		}
+
+		if (url && (url.protocol === 'https:' || url.protocol === 'http:')) {
+			return url;
+		}
+
+		return null;
+	};
+</script>
+
+<script lang="ts">
+	import type { AppBskyEmbedExternal } from '@atcute/client/lexicons';
+
+	import EarthOutlined from '$lib/components/central-icons/earth-outlined.svelte';
+
+	interface Props {
+		embed: AppBskyEmbedExternal.View;
+	}
+
+	const { embed }: Props = $props();
+
+	const external = embed.external;
+
+	const domain = safeParseUrl(external.uri)?.host;
+</script>
+
+<a target="_blank" href={domain && external.uri} rel="noopener noreferrer nofollow" class="external-embed">
+	{#if external.thumb}
+		<img loading="lazy" src={external.thumb} alt="" class="thumbnail" />
+	{/if}
+
+	<div class="meta">
+		<p class="title">{external.title}</p>
+		<p class="description">{external.description}</p>
+
+		{#if domain}
+			<div class="domain">
+				<EarthOutlined />
+
+				<span class="domain-name">{domain}</span>
+			</div>
+		{/if}
+	</div>
+</a>
+
+<style>
+	.external-embed {
+		display: block;
+		border: 1px solid var(--divider-md);
+		border-radius: 6px;
+		overflow: hidden;
+		color: var(--text-primary);
+
+		&:hover {
+			background: var(--tap-sm);
+		}
+	}
+
+	.thumbnail {
+		display: block;
+		border-bottom: 1px solid var(--divider-md);
+		background: var(--bg-primary);
+		aspect-ratio: 1.91;
+		width: 100%;
+		object-fit: cover;
+	}
+
+	.meta {
+		padding: 12px;
+	}
+
+	.title {
+		display: -webkit-box;
+		overflow: hidden;
+		font-weight: 700;
+		white-space: pre-wrap;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		overflow-wrap: break-word;
+
+		&:empty {
+			display: none;
+		}
+	}
+	.description {
+		display: -webkit-box;
+		overflow: hidden;
+		color: var(--text-blurb);
+		font-size: 0.8125rem;
+		white-space: pre-wrap;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		overflow-wrap: break-word;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	.domain {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		margin: 6px 0 0 0;
+		color: var(--text-blurb);
+		font-weight: 500;
+		font-size: 0.75rem;
+	}
+</style>

src/lib/components/embeds/feed-embed.svelte

···
+<script lang="ts">
+	import type { AppBskyFeedDefs } from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	import { parseAtUri } from '$lib/types/at-uri';
+
+	interface Props {
+		embed: AppBskyFeedDefs.GeneratorView;
+	}
+
+	const { embed: feed }: Props = $props();
+
+	const creator = $derived(feed.creator);
+</script>
+
+<a href="{base}/{creator.did}/feeds/{parseAtUri(feed.uri).rkey}" class="feed-embed">
+	<div class="main">
+		<div class="avatar-wrapper">
+			{#if feed.avatar}
+				<img loading="lazy" src={feed.avatar} alt="" class="avatar" />
+			{:else}
+				<svg viewBox="0 0 32 32" class="avatar">
+					<path fill="#0070FF" d="M0 0h32v32H0z" />
+					<path
+						fill="#fff"
+						d="M22.153 22.354a9.328 9.328 0 0 0 3.837-.491 3.076 3.076 0 0 0-4.802-2.79m.965 3.281a6.128 6.128 0 0 0-.965-3.28Zm-11.342-3.28a3.077 3.077 0 0 0-4.801 2.79 9.21 9.21 0 0 0 3.835.49m.966-3.28a6.127 6.127 0 0 0-.966 3.28Zm8.265-8.997a3.076 3.076 0 1 1-6.153 0 3.076 3.076 0 0 1 6.153 0Zm6.154 3.077a2.307 2.307 0 1 1-4.615 0 2.307 2.307 0 0 1 4.615 0Zm-13.847 0a2.307 2.307 0 1 1-4.614 0 2.307 2.307 0 0 1 4.614 0Z"
+					/>
+					<path fill="#fff" d="M22 22c0 3.314-2.686 3.5-6 3.5s-6-.186-6-3.5a6 6 0 0 1 12 0Z" />
+				</svg>
+			{/if}
+		</div>
+
+		<div class="info">
+			<p class="name">{feed.displayName}</p>
+			<p class="creator">Feed by @{creator.handle}</p>
+		</div>
+	</div>
+
+	<p class="description">{feed.description}</p>
+</a>
+
+<style>
+	.feed-embed {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		border: 1px solid var(--divider-md);
+		border-radius: 6px;
+		padding: 12px;
+		color: var(--text-primary);
+
+		&:hover {
+			background: var(--tap-sm);
+		}
+	}
+
+	.main {
+		display: flex;
+		gap: 12px;
+	}
+
+	.avatar-wrapper {
+		margin: 2px 0 0 0;
+		border-radius: 6px;
+		background: var(--bg-secondary);
+		width: 36px;
+		height: 36px;
+		overflow: hidden;
+	}
+	.avatar {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		font-size: 0;
+	}
+
+	.name {
+		font-weight: 700;
+	}
+
+	.creator {
+		color: var(--text-blurb);
+		font-size: 0.8125rem;
+	}
+
+	.description {
+		display: -webkit-box;
+		overflow: hidden;
+		font-size: 0.8125rem;
+		white-space: pre-wrap;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		overflow-wrap: break-word;
+
+		&:empty {
+			display: none;
+		}
+	}
+</style>

src/lib/components/embeds/image-embed.svelte

···
+<script lang="ts" module>
+	const DEFAULT_RATIO = { width: 16, height: 9 };
+</script>
+
+<script lang="ts">
+	import type { AppBskyEmbedImages } from '@atcute/client/lexicons';
+
+	interface Props {
+		embed: AppBskyEmbedImages.View;
+		borderless?: boolean;
+		standalone?: boolean;
+		blur?: boolean;
+	}
+
+	const { embed, borderless, standalone, blur }: Props = $props();
+
+	const images = $derived(embed.images);
+	const length = $derived(images.length);
+</script>
+
+<div class={['image-embed', !borderless && 'is-bordered', standalone && length === 1 && 'is-aligned']}>
+	{#if length === 4}
+		<div class="grid">
+			<div class="col">
+				<div class="item wide tl">
+					{@render Image(0)}
+				</div>
+				<div class="item wide bl">
+					{@render Image(2)}
+				</div>
+			</div>
+			<div class="col">
+				<div class="item wide tr">
+					{@render Image(1)}
+				</div>
+				<div class="item wide br">
+					{@render Image(3)}
+				</div>
+			</div>
+		</div>
+	{:else if length === 3}
+		<div class="grid">
+			<div class="col square">
+				<div class="item tl bl">
+					{@render Image(0)}
+				</div>
+			</div>
+			<div class="col square">
+				<div class="item tr">
+					{@render Image(1)}
+				</div>
+				<div class="item br">
+					{@render Image(2)}
+				</div>
+			</div>
+		</div>
+	{:else if length === 2}
+		<div class="grid">
+			<div class="col">
+				<div class="item square tl bl">
+					{@render Image(0)}
+				</div>
+			</div>
+			<div class="col">
+				<div class="item square tr br">
+					{@render Image(1)}
+				</div>
+			</div>
+		</div>
+	{:else if length === 1}
+		{@const ratio = standalone && (images[0].aspectRatio || DEFAULT_RATIO)}
+
+		<div
+			class={['single-item tl tr bl br', ratio && 'is-standalone', ratio === DEFAULT_RATIO && 'is-defaulted']}
+			style={ratio ? `aspect-ratio: ${ratio.width}/${ratio.height}` : ``}
+		>
+			{@render Image(0)}
+
+			{#if ratio}
+				<div class="placeholder"></div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+{#snippet Image(index: number)}
+	{@const image = images[index]}
+
+	<img loading="lazy" src={image.thumb} alt={image.alt} class={`image` + (blur ? ` is-blurred` : ``)} />
+{/snippet}
+
+<style>
+	.is-aligned {
+		align-self: baseline;
+		max-width: 100%;
+	}
+
+	.grid {
+		display: flex;
+		gap: 2px;
+	}
+	.col {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.square {
+		aspect-ratio: 1;
+	}
+	.wide {
+		aspect-ratio: 1.5;
+	}
+
+	.item {
+		position: relative;
+		flex-grow: 1;
+		flex-shrink: 0;
+		overflow: hidden;
+	}
+
+	.is-bordered {
+		.tl,
+		.tr,
+		.bl,
+		.br {
+			border: 1px solid var(--divider-md);
+		}
+
+		.tl {
+			border-top-left-radius: 6px;
+		}
+		.tr {
+			border-top-right-radius: 6px;
+		}
+		.bl {
+			border-bottom-left-radius: 6px;
+		}
+		.br {
+			border-bottom-right-radius: 6px;
+		}
+	}
+
+	.single-item {
+		position: relative;
+		aspect-ratio: 16 / 9;
+		overflow: hidden;
+	}
+	.is-standalone {
+		min-width: 64px;
+		max-width: 100%;
+		min-height: 64px;
+		max-height: 320px;
+	}
+
+	.image {
+		position: absolute;
+		inset: 0;
+		background: var(--bg-secondary);
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		font-size: 0px;
+	}
+	.is-defaulted .image {
+		object-fit: contain;
+	}
+	.is-blurred {
+		scale: 125%;
+		filter: blur(24px);
+	}
+
+	.placeholder {
+		width: 100vw;
+		height: 100vh;
+	}
+</style>

src/lib/components/embeds/list-embed.svelte

···
+<script lang="ts" module>
+	const getPurpose = (purpose: AppBskyGraphDefs.ListPurpose) => {
+		switch (purpose) {
+			case 'app.bsky.graph.defs#curatelist':
+				return `User list`;
+			case 'app.bsky.graph.defs#modlist':
+				return `Moderation list`;
+		}
+
+		return `Unknown list`;
+	};
+</script>
+
+<script lang="ts">
+	import type { AppBskyGraphDefs } from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	import { parseAtUri } from '$lib/types/at-uri';
+
+	interface Props {
+		embed: AppBskyGraphDefs.ListView;
+	}
+
+	const { embed: list }: Props = $props();
+
+	const creator = $derived(list.creator);
+</script>
+
+<a href="{base}/{creator.did}/lists/{parseAtUri(list.uri).rkey}" class="list-embed">
+	<div class="main">
+		<div class="avatar-wrapper">
+			{#if list.avatar}
+				<img loading="lazy" src={list.avatar} alt="" class="avatar" />
+			{:else}
+				<svg viewBox="0 0 32 32" class="avatar">
+					<path fill="#0070FF" d="M0 0h32v32H0z" />
+					<path
+						fill="#fff"
+						d="M22.153 22.354a9.328 9.328 0 0 0 3.837-.491 3.076 3.076 0 0 0-4.802-2.79m.965 3.281a6.128 6.128 0 0 0-.965-3.28Zm-11.342-3.28a3.077 3.077 0 0 0-4.801 2.79 9.21 9.21 0 0 0 3.835.49m.966-3.28a6.127 6.127 0 0 0-.966 3.28Zm8.265-8.997a3.076 3.076 0 1 1-6.153 0 3.076 3.076 0 0 1 6.153 0Zm6.154 3.077a2.307 2.307 0 1 1-4.615 0 2.307 2.307 0 0 1 4.615 0Zm-13.847 0a2.307 2.307 0 1 1-4.614 0 2.307 2.307 0 0 1 4.614 0Z"
+					/>
+					<path fill="#fff" d="M22 22c0 3.314-2.686 3.5-6 3.5s-6-.186-6-3.5a6 6 0 0 1 12 0Z" />
+				</svg>
+			{/if}
+		</div>
+
+		<div class="info">
+			<p class="name">{list.name}</p>
+			<p class="creator">{getPurpose(list.purpose)} by @{creator.handle}</p>
+		</div>
+	</div>
+
+	<p class="description">{list.description}</p>
+</a>
+
+<style>
+	.list-embed {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		border: 1px solid var(--divider-md);
+		border-radius: 6px;
+		padding: 12px;
+		color: var(--text-primary);
+
+		&:hover {
+			background: var(--tap-sm);
+		}
+	}
+
+	.main {
+		display: flex;
+		gap: 12px;
+	}
+
+	.avatar-wrapper {
+		margin: 2px 0 0 0;
+		border-radius: 6px;
+		background: var(--bg-secondary);
+		width: 36px;
+		height: 36px;
+		overflow: hidden;
+	}
+	.avatar {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		font-size: 0;
+	}
+
+	.name {
+		font-weight: 700;
+	}
+
+	.creator {
+		color: var(--text-blurb);
+		font-size: 0.8125rem;
+	}
+
+	.description {
+		display: -webkit-box;
+		overflow: hidden;
+		font-size: 0.8125rem;
+		white-space: pre-wrap;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		overflow-wrap: break-word;
+
+		&:empty {
+			display: none;
+		}
+	}
+</style>

src/lib/components/embeds/quote-embed.svelte

···
+<script lang="ts" module>
+	const getPostImage = (embed: AppBskyFeedDefs.PostView['embed']): AppBskyEmbedImages.View | undefined => {
+		if (embed) {
+			if (embed.$type === 'app.bsky.embed.images#view') {
+				return embed;
+			}
+
+			if (embed.$type === 'app.bsky.embed.recordWithMedia#view') {
+				return getPostImage(embed.media);
+			}
+		}
+	};
+
+	const getPostVideo = (embed: AppBskyFeedDefs.PostView['embed']): AppBskyEmbedVideo.View | undefined => {
+		if (embed) {
+			if (embed.$type === 'app.bsky.embed.video#view') {
+				return embed;
+			}
+
+			if (embed.$type === 'app.bsky.embed.recordWithMedia#view') {
+				return getPostVideo(embed.media);
+			}
+		}
+	};
+</script>
+
+<script lang="ts">
+	import type {
+		AppBskyEmbedImages,
+		AppBskyEmbedRecord,
+		AppBskyEmbedVideo,
+		AppBskyFeedDefs,
+		AppBskyFeedPost,
+	} from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	import { parseAtUri } from '$lib/types/at-uri';
+	import { formatRelativeTime } from '$lib/utils/intl/date';
+
+	import ImageEmbed from './image-embed.svelte';
+	import VideoEmbed from './video-embed.svelte';
+
+	interface Props {
+		embed: AppBskyEmbedRecord.ViewRecord;
+		large?: boolean;
+	}
+
+	const { embed: quote, large = false }: Props = $props();
+
+	const record = $derived(quote.value as AppBskyFeedPost.Record);
+	const text = $derived(record.text.trim());
+
+	const author = $derived(quote.author);
+	const authorName = $derived(author.displayName?.trim());
+
+	const embed = $derived(quote.embeds?.[0]);
+	const image = $derived(getPostImage(embed));
+	const video = $derived(getPostVideo(embed));
+</script>
+
+<a href="{base}/{author.did}/{parseAtUri(quote.uri).rkey}#main" class="quote-embed">
+	<div class="meta">
+		<div class="avatar-wrapper">
+			{#if author.avatar}
+				<img loading="lazy" src={author.avatar} alt="" class="avatar" />
+			{/if}
+		</div>
+
+		<span class="name-wrapper">
+			{#if authorName}
+				<bdi class="display-name-wrapper">
+					<span class="display-name">{authorName}</span>
+				</bdi>
+			{/if}
+
+			<span class="handle">@{author.handle}</span>
+		</span>
+
+		<span aria-hidden="true" class="dot">·</span>
+
+		<time datetime={record.createdAt} class="date">
+			{formatRelativeTime(record.createdAt)}
+		</time>
+	</div>
+
+	{#if text}
+		<div class="body">
+			{#if !large}
+				{#if image}
+					<div class="aside">
+						<ImageEmbed embed={image} blur={false} />
+					</div>
+				{:else if video}
+					<div class="aside">
+						<VideoEmbed embed={video} blur={false} />
+					</div>
+				{/if}
+			{/if}
+
+			<p class="text">{text}</p>
+		</div>
+	{:else}
+		<div class="divide"></div>
+	{/if}
+
+	{#if large || !text}
+		{#if image}
+			<ImageEmbed embed={image} borderless blur={false} />
+		{:else if video}
+			<VideoEmbed embed={video} borderless blur={false} />
+		{/if}
+	{/if}
+</a>
+
+<style>
+	.quote-embed {
+		display: block;
+		border: 1px solid var(--divider-md);
+		border-radius: 6px;
+		overflow: hidden;
+		color: var(--text-primary);
+
+		&:hover {
+			background: var(--tap-sm);
+		}
+	}
+
+	.meta {
+		display: flex;
+		padding: 12px 12px 0 12px;
+		color: var(--text-blurb);
+
+		.avatar-wrapper {
+			flex-shrink: 0;
+			margin: 0 8px 0 0;
+			border-radius: 9999px;
+			background: var(--bg-secondary);
+			width: 20px;
+			height: 20px;
+			overflow: hidden;
+		}
+		.avatar {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			font-size: 0;
+		}
+
+		.name-wrapper {
+			display: flex;
+			gap: 4px;
+			max-width: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		.display-name-wrapper {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.display-name {
+			color: var(--text-primary);
+			font-weight: 700;
+		}
+		.handle {
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.dot {
+			flex-shrink: 0;
+			margin: 0 6px;
+		}
+
+		.date {
+			white-space: nowrap;
+		}
+	}
+
+	.body {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.aside {
+		flex-grow: 1;
+		flex-basis: 0;
+		margin: 8px 0 12px 12px;
+		max-width: 20%;
+	}
+
+	.text {
+		display: -webkit-box;
+		margin: 8px 12px 12px 12px;
+		overflow: hidden;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 6;
+		line-clamp: 6;
+		flex-grow: 4;
+		flex-basis: 0px;
+		min-width: 0px;
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+	}
+
+	.divide {
+		padding: 6px 0;
+	}
+</style>

src/lib/components/embeds/starterpack-embed.svelte

···
+<script lang="ts">
+	import type { AppBskyGraphDefs, AppBskyGraphStarterpack } from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	import { parseAtUri } from '$lib/types/at-uri';
+
+	interface Props {
+		embed: AppBskyGraphDefs.StarterPackViewBasic;
+		large?: boolean;
+	}
+
+	const { embed: pack, large = false }: Props = $props();
+
+	const record = pack.record as AppBskyGraphStarterpack.Record;
+
+	const creator = $derived(pack.creator);
+
+	const rkey = $derived(parseAtUri(pack.uri).rkey);
+</script>
+
+<a href="{base}/{creator.did}/packs/{rkey}" class="starterpack-embed">
+	{#if large}
+		<img
+			loading="lazy"
+			src="https://ogcard.cdn.bsky.app/start/${creator.did}/${rkey}"
+			alt=""
+			class="banner"
+		/>
+	{/if}
+
+	<div class="meta">
+		<div class="main">
+			<svg fill="none" viewBox="0 0 24 24" class="avatar">
+				<defs>
+					<linearGradient id="a" x1="0" x2="100%" y1="0" y2="0" gradientTransform="rotate(45)">
+						<stop offset="0" stop-color="#0A7AFF" />
+						<stop offset="1" stop-color="#59B9FF" />
+					</linearGradient>
+				</defs>
+				<path
+					fill="url(#a)"
+					fill-rule="evenodd"
+					d="M11.26 5.227 5.02 6.899c-.734.197-1.17.95-.973 1.685l1.672 6.24c.197.734.951 1.17 1.685.973l6.24-1.672a1.376 1.376 0 0 0 .973-1.685L12.945 6.2a1.375 1.375 0 0 0-1.685-.973Zm-6.566.459a2.632 2.632 0 0 0-1.86 3.223l1.672 6.24a2.632 2.632 0 0 0 3.223 1.861l6.24-1.672a2.631 2.631 0 0 0 1.861-3.223l-1.672-6.24a2.632 2.632 0 0 0-3.223-1.861l-6.24 1.672Z"
+					clip-rule="evenodd"
+				/>
+				<path
+					fill="url(#a)"
+					fill-rule="evenodd"
+					d="M15.138 18.411a4.606 4.606 0 1 0 0-9.211 4.606 4.606 0 0 0 0 9.211Zm0 1.257a5.862 5.862 0 1 0 0-11.724 5.862 5.862 0 0 0 0 11.724Z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+
+			<div class="info">
+				<p class="name">{record.name}</p>
+				<p class="creator">Starter pack by @{creator.handle}</p>
+			</div>
+		</div>
+
+		<p class="description">{record.description}</p>
+	</div>
+</a>
+
+<style>
+	.starterpack-embed {
+		display: block;
+		border: 1px solid var(--divider-md);
+		border-radius: 6px;
+		overflow: hidden;
+		color: var(--text-primary);
+
+		&:hover {
+			background: var(--tap-sm);
+		}
+	}
+
+	.banner {
+		display: block;
+		aspect-ratio: 1.91;
+		width: 100%;
+	}
+
+	.meta {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 12px;
+	}
+
+	.main {
+		display: flex;
+		gap: 12px;
+	}
+
+	.avatar {
+		margin: 2px;
+		width: 36px;
+		height: 36px;
+	}
+
+	.name {
+		font-weight: 700;
+	}
+
+	.creator {
+		color: var(--text-blurb);
+		font-size: 0.8125rem;
+	}
+
+	.description {
+		display: -webkit-box;
+		overflow: hidden;
+		font-size: 0.8125rem;
+		white-space: pre-wrap;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		overflow-wrap: break-word;
+
+		&:empty {
+			display: none;
+		}
+	}
+</style>

src/lib/components/embeds/video-embed.svelte

···
+<script lang="ts">
+	import type { AppBskyEmbedVideo } from '@atcute/client/lexicons';
+
+	import PlaySolid from '$lib/components/central-icons/play-solid.svelte';
+
+	interface Props {
+		embed: AppBskyEmbedVideo.View;
+		borderless?: boolean;
+		standalone?: boolean;
+		blur?: boolean;
+	}
+
+	const { embed: video, borderless, standalone, blur }: Props = $props();
+
+	const ratio = standalone && video.aspectRatio;
+</script>
+
+{#if standalone}
+	<div class={['video-embed', !borderless && 'is-bordered', standalone && 'is-standalone']}>
+		<div class="constrainer" style={ratio ? `aspect-ratio: ${ratio.width}/${ratio.height}` : ``}>
+			{@render Content()}
+		</div>
+	</div>
+{:else}
+	<div
+		class={['video-embed', !borderless && 'is-bordered']}
+		style={ratio ? `aspect-ratio: ${ratio.width}/${ratio.height}` : ``}
+	>
+		{@render Content()}
+	</div>
+{/if}
+
+{#snippet Content()}
+	<img loading="lazy" src={video.thumbnail} alt="" class={['thumbnail', blur && 'is-blurred']} />
+
+	{#if ratio}
+		<div class="placeholder"></div>
+	{/if}
+
+	<div class="play">
+		<PlaySolid />
+	</div>
+{/snippet}
+
+<style>
+	.video-embed {
+		position: relative;
+		background: var(--bg-secondary);
+		aspect-ratio: 16 / 9;
+		overflow: hidden;
+	}
+	.is-bordered {
+		border: 1px solid var(--divider-md);
+		border-radius: 6px;
+	}
+	.is-standalone {
+		align-self: baseline;
+		aspect-ratio: auto;
+		max-width: 100%;
+	}
+
+	.constrainer {
+		min-width: 64px;
+		max-width: 100%;
+		min-height: 64px;
+		max-height: 320px;
+	}
+
+	.thumbnail {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+	.is-blurred {
+		scale: 125%;
+		filter: blur(24px);
+	}
+
+	.placeholder {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.play {
+		display: grid;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		place-items: center;
+		translate: -50% -50%;
+		border-radius: 50%;
+		background: rgba(64, 64, 64, 0.6);
+		aspect-ratio: 1 / 1;
+		height: 40%;
+		max-height: 48px;
+		color: #ffffff;
+		font-size: 20px;
+
+		:global(.sv-icon) {
+			width: 40%;
+			height: 40%;
+		}
+
+		.is-standalone &:hover {
+			background: rgba(64, 64, 64, 0.8);
+		}
+	}
+</style>

src/lib/components/page/page-container.svelte

···
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet<[]>;
+	}
+
+	const { children }: Props = $props();
+</script>
+
+<div class="page-container">
+	{@render children()}
+</div>
+
+<style>
+	.page-container {
+		display: flex;
+		flex-direction: column;
+		margin: 24px auto;
+		width: 100%;
+		max-width: 600px;
+	}
+</style>

src/lib/components/page/page-header.svelte

···
+<script lang="ts">
+	interface Props {
+		title: string;
+	}
+
+	const { title }: Props = $props();
+</script>
+
+<div class="page-header">
+	<h2 class="title">{title}</h2>
+</div>
+
+<style>
+	.page-header {
+		position: sticky;
+		top: 0;
+		border-bottom: 1px solid var(--divider-sm);
+		background: var(--bg-primary);
+		padding: 12px 16px;
+		z-index: 1;
+	}
+
+	.title {
+		font-weight: 600;
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+</style>

src/lib/components/page/page-listing.svelte

···
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		subject: 'timeline' | 'posts' | 'profiles' | 'reposts' | 'likes';
+		root: boolean;
+		cursor: string | undefined;
+		children: Snippet<[]>;
+	}
+
+	const { subject, root, cursor, children }: Props = $props();
+</script>
+
+<div class="page-listing">
+	{#if !root}
+		<a href="?" class="button latest-button">Show latest {subject}</a>
+	{/if}
+
+	{@render children()}
+
+	{#if cursor}
+		<a href="?cursor={encodeURIComponent(cursor)}" class="button more-button">
+			{subject === 'timeline' ? `Show older posts` : `Show more ${subject}`}
+		</a>
+	{:else}
+		<div class="end-marker">
+			{subject === 'timeline' ? `No more posts.` : `No more ${subject}.`}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.page-listing {
+		background: var(--bg-primary);
+	}
+
+	.button {
+		display: grid;
+		place-items: center;
+		height: 53px;
+		font-weight: 500;
+
+		&:hover {
+			background: var(--tap-sm);
+		}
+	}
+	.latest-button {
+		border-bottom: 1px solid var(--divider-sm);
+	}
+
+	.end-marker {
+		display: grid;
+		place-items: center;
+		height: 53px;
+		color: var(--text-blurb);
+		font-style: italic;
+		font-weight: 500;
+	}
+</style>

src/lib/components/profiles/profile-item.svelte

···
+<script lang="ts">
+	import type { AppBskyActorDefs } from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	interface Props {
+		item: AppBskyActorDefs.ProfileView | AppBskyActorDefs.ProfileViewBasic;
+	}
+
+	const { item: profile }: Props = $props();
+
+	const href = $derived(`${base}/${profile.did}`);
+</script>
+
+<div class="profile-item">
+	<div class="aside">
+		<a {href} tabindex={-1} class="avatar-wrapper">
+			{#if profile.avatar}
+				<img loading="lazy" src={profile.avatar} alt="" class="avatar" />
+			{/if}
+		</a>
+	</div>
+
+	<div class="main">
+		<div class="content">
+			<a {href} class="name-wrapper">
+				<p class="display-name">{profile.displayName}</p>
+				<p class="handle">@{profile.handle}</p>
+			</a>
+		</div>
+
+		{#if 'description' in profile && profile.description?.trim()}
+			<p class="bio">{profile.description}</p>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.profile-item {
+		display: flex;
+		gap: 12px;
+		contain: content;
+		padding: 12px 16px;
+
+		@media (hover: hover) {
+			&:hover {
+				background: var(--tap-sm);
+			}
+		}
+	}
+
+	.aside {
+		display: flex;
+		flex-shrink: 0;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.avatar-wrapper {
+		display: block;
+		margin: 2px 0 0;
+		border-radius: 9999px;
+		background: var(--bg-secondary);
+		width: 36px;
+		height: 36px;
+		overflow: hidden;
+
+		&:hover {
+			filter: brightness(0.85);
+		}
+	}
+	.avatar {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		font-size: 0;
+	}
+
+	.main {
+		display: flex;
+		flex-grow: 1;
+		flex-direction: column;
+		gap: 4px;
+		min-width: 0;
+	}
+
+	.content {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 12px;
+		margin: auto 0;
+		height: 40px;
+	}
+
+	.name-wrapper {
+		min-width: 0;
+	}
+	.display-name {
+		overflow: hidden;
+		color: var(--text-primary);
+		font-weight: 600;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		&:empty {
+			color: var(--text-muted);
+		}
+
+		.name-wrapper:hover & {
+			text-decoration: underline;
+		}
+	}
+	.handle {
+		overflow: hidden;
+		color: var(--text-blurb);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.bio {
+		display: -webkit-box;
+		overflow: hidden;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+</style>

src/lib/components/richtext-raw-renderer.svelte

···
+<script lang="ts" module>
+	const HTTP_RE = /^https?:\/\//;
+</script>
+
+<script lang="ts">
+	import { tokenize } from '@atcute/bluesky-richtext-parser';
+
+	interface Props {
+		text: string;
+		large?: boolean;
+	}
+
+	const { text, large }: Props = $props();
+</script>
+
+<p class={`rich-text` + (large ? ` is-large` : ` is-small`)}>
+	{#each tokenize(text) as token}
+		{#if token.type === 'autolink'}
+			<a target="_blank" href={token.url} rel="noopener nofollow" class="link">
+				{token.raw.replace(HTTP_RE, '')}
+			</a>
+		{:else if token.type === 'mention'}
+			<a href="/{token.handle}" class="mention">{token.raw}</a>
+		{:else if token.type === 'topic'}
+			<span class="hashtag">{token.raw}</span>
+		{:else}
+			{token.raw}
+		{/if}
+	{/each}
+</p>
+
+<style>
+	.rich-text {
+		overflow: hidden;
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+
+		&:empty {
+			display: none;
+		}
+	}
+	.is-large {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	.link,
+	.mention,
+	.hashtag {
+		color: var(--text-link);
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+</style>

src/lib/components/richtext-renderer.svelte

···
+<script lang="ts" module>
+	import { segmentize, type Facet, type FacetFeature } from '@atcute/bluesky-richtext-segmenter';
+
+	const grabFirstSupported = (features: FacetFeature[] | undefined): FacetFeature | undefined => {
+		return features?.find(
+			(feature) =>
+				feature.$type === 'app.bsky.richtext.facet#link' ||
+				feature.$type === 'app.bsky.richtext.facet#mention' ||
+				feature.$type === 'app.bsky.richtext.facet#tag',
+		);
+	};
+</script>
+
+<script lang="ts">
+	import { base } from '$app/paths';
+
+	interface Props {
+		text: string;
+		facets?: Facet[];
+		large?: boolean;
+	}
+
+	const { text, facets, large }: Props = $props();
+</script>
+
+<p class={`rich-text` + (large ? ` is-large` : ` is-small`)}>
+	{#each segmentize(text, facets) as segment}
+		{@const feature = grabFirstSupported(segment.features)}
+
+		{#if !feature}
+			{segment.text}
+		{:else if feature.$type === 'app.bsky.richtext.facet#link'}
+			<a target="_blank" href={feature.uri} rel="noopener nofollow" class="link">{segment.text}</a>
+		{:else if feature.$type === 'app.bsky.richtext.facet#mention'}
+			<a href="{base}/{feature.did}" class="mention">{segment.text}</a>
+		{:else if feature.$type === 'app.bsky.richtext.facet#tag'}
+			<span class="hashtag">{segment.text}</span>
+		{/if}
+	{/each}
+</p>
+
+<style>
+	.rich-text {
+		overflow: hidden;
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+
+		&:empty {
+			display: none;
+		}
+	}
+	.is-large {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	.link,
+	.mention,
+	.hashtag {
+		color: var(--text-link);
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+</style>

src/lib/components/threads/main-post-metrics.svelte

···
+<script lang="ts">
+	import type { AppBskyFeedDefs } from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	import { parseAtUri } from '$lib/types/at-uri';
+	import { formatCompactNumber } from '$lib/utils/intl/number';
+
+	interface Props {
+		post: AppBskyFeedDefs.PostView;
+	}
+
+	const { post }: Props = $props();
+
+	const baseUrl = $derived(`${base}/${post.author.did}/${parseAtUri(post.uri).rkey}`);
+</script>
+
+{#snippet Stat(count: number | undefined, one: string, many: string, href: string)}
+	{#if count !== undefined && count > 0}
+		<a {href} class="stat">
+			<span class="count">{formatCompactNumber(count)}</span>
+			<span class="label"> {count === 1 ? one : many}</span>
+		</a>
+	{/if}
+{/snippet}
+
+{#if post.repostCount || post.quoteCount || post.likeCount}
+	<div class="main-post-metrics">
+		{@render Stat(post.repostCount, 'repost', 'reposts', `${baseUrl}/reposts`)}
+		{@render Stat(post.quoteCount, 'quote', 'quotes', `${baseUrl}/quotes`)}
+		{@render Stat(post.likeCount, 'like', 'likes', `${baseUrl}/likes`)}
+	</div>
+{/if}
+
+<style>
+	.main-post-metrics {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 16px;
+		border-top: 1px solid var(--divider-md);
+		padding: 16px 0;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	.stat {
+		color: var(--text-primary);
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	.count {
+		font-weight: 600;
+	}
+	.label {
+		color: var(--text-blurb);
+	}
+</style>

src/lib/components/threads/main-post.svelte

···
+<script lang="ts">
+	import type { AppBskyFeedDefs, AppBskyFeedPost } from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	import { parseAtUri } from '$lib/types/at-uri';
+	import { formatLongDate } from '$lib/utils/intl/date';
+
+	import Embeds from '../embeds/embeds.svelte';
+	import RichTextRenderer from '../richtext-renderer.svelte';
+
+	import MainPostMetrics from './main-post-metrics.svelte';
+
+	interface Props {
+		post: AppBskyFeedDefs.PostView;
+		prev?: boolean;
+	}
+
+	const { post, prev = false }: Props = $props();
+
+	const author = $derived(post.author);
+	const authorUrl = $derived(`/${author.did}`);
+	const authorName = $derived(author.displayName?.trim());
+
+	const record = $derived(post.record as AppBskyFeedPost.Record);
+	const postUrl = $derived(`${base}/${author.did}/${parseAtUri(post.uri).rkey}#main`);
+</script>
+
+<div class="highlighted-post">
+	<div class="meta">
+		{#if prev}
+			<div class="ancestor-line-wrapper">
+				<div class="ancestor-line"></div>
+			</div>
+		{/if}
+
+		<a href={authorUrl} class="avatar-wrapper">
+			{#if author.avatar}
+				<img loading="lazy" src={author.avatar} alt="" class={`avatar`} />
+			{/if}
+		</a>
+
+		<a href={authorUrl} class="name-wrapper">
+			{#if authorName}
+				<bdi class="display-name-wrapper">
+					<span class="display-name">{authorName}</span>
+				</bdi>
+			{/if}
+
+			<span class="handle">@{author.handle}</span>
+		</a>
+	</div>
+
+	<RichTextRenderer text={record.text} facets={record.facets} large />
+
+	{#if post.embed}
+		<Embeds embed={post.embed} large />
+	{/if}
+
+	<div class="footer">
+		<a href={postUrl} class="date">
+			<time datetime={record.createdAt}>
+				{formatLongDate(record.createdAt)}
+			</time>
+		</a>
+	</div>
+
+	<MainPostMetrics {post} />
+</div>
+
+<style>
+	.highlighted-post {
+		padding: 12px 16px 0 16px;
+	}
+
+	.meta {
+		display: flex;
+		position: relative;
+		align-items: center;
+		gap: 12px;
+		margin: 0 0 12px 0;
+		color: var(--text-blurb);
+	}
+
+	.avatar-wrapper {
+		display: block;
+		flex-shrink: 0;
+		border-radius: 9999px;
+		background: var(--bg-secondary);
+		width: 40px;
+		height: 40px;
+		overflow: hidden;
+
+		&:hover {
+			filter: brightness(0.85);
+		}
+	}
+
+	.avatar {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.is-blurred {
+		scale: 125%;
+		filter: blur(4px);
+	}
+
+	.name-wrapper {
+		display: block;
+		flex-grow: 1;
+		max-width: 100%;
+		overflow: hidden;
+		color: inherit;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.display-name-wrapper {
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		.name-wrapper:hover & {
+			text-decoration: underline;
+		}
+	}
+	.display-name {
+		color: var(--text-primary);
+		font-weight: 700;
+	}
+	.handle {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.footer {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 8px;
+		margin: 12px 0 0;
+		padding: 0 0 12px 0;
+	}
+	.date {
+		color: var(--text-blurb);
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	.ancestor-line-wrapper {
+		display: flex;
+		position: absolute;
+		bottom: 100%;
+		flex-direction: column;
+		align-items: center;
+		margin: 0 0 4px 0;
+		width: 36px;
+		height: 12px;
+	}
+	.ancestor-line {
+		flex-grow: 1;
+		border-left: 2px solid var(--divider-md);
+	}
+</style>

src/lib/components/threads/overflow-thread-item.svelte

···
+<script lang="ts">
+	import type { OverflowAncestorItem, OverflowDescendantItem } from '$lib/models/thread';
+	import { parseAtUri } from '$lib/types/at-uri';
+
+	import { base } from '$app/paths';
+
+	import DotGrid_1x3HorizontalOutlined from '$lib/components/central-icons/dot-grid-1x3-horizontal-outlined.svelte';
+
+	import TreeLines from './tree-lines.svelte';
+
+	interface Props {
+		item: OverflowAncestorItem | OverflowDescendantItem;
+		treeView: boolean;
+		descendant: boolean;
+	}
+
+	const { item, treeView, descendant }: Props = $props();
+
+	const postUrl = $derived.by(() => {
+		const uri = parseAtUri(item.uri);
+		return `${base}/${uri.repo}/${uri.rkey}#main`;
+	});
+</script>
+
+<a
+	href={postUrl}
+	class={['overflow-thread-item', treeView ? 'is-tree' : 'is-flat', !descendant && 'has-next']}
+>
+	{#if treeView}
+		<TreeLines lines={item.lines} />
+	{:else}
+		<div class="dots">
+			<div class="dot"></div>
+			<div class="dot"></div>
+			<div class="dot"></div>
+		</div>
+	{/if}
+
+	<div class="content">
+		{#if treeView}
+			<div class="circle">
+				<DotGrid_1x3HorizontalOutlined />
+			</div>
+		{/if}
+
+		<span class="label">
+			{!descendant ? `See parent replies` : `Continue thread`}
+		</span>
+	</div>
+</a>
+
+<style>
+	.overflow-thread-item {
+		display: flex;
+		user-select: none;
+
+		@media (hover: hover) {
+			&:hover {
+				background: var(--tap-sm);
+			}
+		}
+	}
+	.is-tree {
+		padding: 0 12px;
+	}
+
+	.is-flat {
+		padding: 0 16px;
+
+		&:not(.has-next) {
+			border-bottom: 2px solid var(--divider-sm);
+		}
+	}
+
+	.dots {
+		display: flex;
+		flex-shrink: 0;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 6px;
+		margin: 0 12px 0 0;
+		width: 36px;
+	}
+	.dot {
+		border-left: 2px solid var(--divider-md);
+		height: 2px;
+	}
+
+	.content {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 12px 0;
+	}
+
+	.circle {
+		display: grid;
+		place-items: center;
+		border-radius: 9999px;
+		background: var(--divider-md);
+		width: 20px;
+		height: 20px;
+		color: var(--text-blurb);
+		font-size: 12px;
+	}
+</style>

src/lib/components/threads/post-thread-item.svelte

···
+<script lang="ts">
+	import type { AppBskyFeedPost } from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	import { type PostAncestorItem, type PostDescendantItem } from '$lib/models/thread';
+	import { parseAtUri } from '$lib/types/at-uri';
+
+	import Embeds from '../embeds/embeds.svelte';
+	import RichtextRenderer from '../richtext-renderer.svelte';
+	import PostMeta from '../timeline/post-meta.svelte';
+	import PostMetrics from '../timeline/post-metrics.svelte';
+
+	import TreeLines from './tree-lines.svelte';
+
+	interface Props {
+		item: PostAncestorItem | PostDescendantItem;
+		treeView: boolean;
+	}
+
+	const { item, treeView }: Props = $props();
+
+	const post = $derived(item.post);
+
+	const author = $derived(post.author);
+	const authorUrl = $derived(`${base}/${author.did}`);
+
+	const record = $derived(post.record as AppBskyFeedPost.Record);
+	const postUrl = $derived(`${base}/${author.did}/${parseAtUri(post.uri).rkey}#main`);
+</script>
+
+<div
+	class={[
+		'post-thread-item',
+		treeView ? 'is-tree' : 'is-flat',
+		item.prev && 'has-prev',
+		item.next && 'has-next',
+	]}
+>
+	{#if treeView}
+		<TreeLines lines={item.lines} />
+	{/if}
+
+	<div class="content">
+		<div class="aside">
+			<div class="ascendant-line"></div>
+
+			<a href={authorUrl} class="avatar-wrapper">
+				{#if author.avatar}
+					<img loading="lazy" src={author.avatar} alt="" class="avatar" />
+				{/if}
+			</a>
+
+			<div class="descendant-line"></div>
+		</div>
+
+		<div class="main">
+			<PostMeta {post} {postUrl} {authorUrl} gutterBottom />
+
+			<RichtextRenderer text={record.text} facets={record.facets} />
+
+			{#if post.embed}
+				<Embeds embed={post.embed} />
+			{/if}
+
+			<PostMetrics {post} />
+		</div>
+	</div>
+</div>
+
+<style>
+	.post-thread-item {
+		display: flex;
+		contain: content;
+
+		@media (hover: hover) {
+			&:hover {
+				background: var(--tap-sm);
+			}
+		}
+	}
+	.is-tree {
+		padding: 0 12px;
+	}
+
+	.is-flat {
+		padding: 0 16px;
+
+		&:not(.has-next) {
+			border-bottom: 2px solid var(--divider-sm);
+		}
+	}
+
+	.content {
+		display: flex;
+		flex-grow: 1;
+		gap: 12px;
+		min-width: 0;
+
+		.is-tree & {
+			gap: 8px;
+		}
+	}
+
+	.ascendant-line {
+		display: none;
+		position: absolute;
+		top: 0;
+		border-left: 2px solid var(--divider-md);
+		height: 8px;
+
+		.is-flat.has-prev & {
+			display: block;
+		}
+	}
+	.descendant-line {
+		display: none;
+		flex-grow: 1;
+		margin: 4px 0 0 0;
+		border-left: 2px solid var(--divider-md);
+
+		.is-tree & {
+			margin: 2px 0 0 0;
+		}
+		.has-next & {
+			display: block;
+		}
+	}
+
+	.aside {
+		display: flex;
+		position: relative;
+		flex-shrink: 0;
+		flex-direction: column;
+		align-items: center;
+		padding-top: 12px;
+	}
+
+	.avatar-wrapper {
+		display: block;
+		border-radius: 9999px;
+		background: var(--bg-secondary);
+		width: 36px;
+		height: 36px;
+		overflow: hidden;
+
+		.is-tree & {
+			width: 20px;
+			height: 20px;
+		}
+
+		&:hover {
+			filter: brightness(0.85);
+		}
+	}
+	.avatar {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		font-size: 0;
+	}
+
+	.main {
+		flex-grow: 1;
+		padding: 12px 0;
+		min-width: 0;
+	}
+</style>

src/lib/components/threads/tree-lines.svelte

···
+<script lang="ts">
+	import { LineType } from '$lib/models/thread';
+
+	interface Props {
+		lines: LineType[] | undefined;
+	}
+
+	const { lines = [] }: Props = $props();
+</script>
+
+<div class="tree-lines">
+	{#each lines as line}
+		<div class="line">
+			{#if line === LineType.UP_RIGHT || line === LineType.VERTICAL_RIGHT}
+				<div class="line-draw-right"></div>
+			{/if}
+			{#if line === LineType.VERTICAL || line === LineType.VERTICAL_RIGHT}
+				<div class="line-draw-vertical"></div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.tree-lines {
+		display: contents;
+	}
+
+	.line {
+		position: relative;
+		flex-shrink: 0;
+		width: 20px;
+	}
+	.line-draw-right {
+		position: absolute;
+		top: 0;
+		right: 2px;
+		border-bottom: 2px solid var(--divider-md);
+		border-left: 2px solid var(--divider-md);
+		border-bottom-left-radius: 9px;
+		width: 9px;
+		height: 22px;
+	}
+	.line-draw-vertical {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 9px;
+		border-left: 2px solid var(--divider-md);
+	}
+</style>

src/lib/components/timeline/post-feed-item.svelte

···
+<script lang="ts">
+	import type { AppBskyFeedPost } from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	import type { UiTimelineItem } from '$lib/models/timeline';
+	import { parseAtUri } from '$lib/types/at-uri';
+
+	import ArrowsRepeatRightLeftOutlined from '$lib/components/central-icons/arrows-repeat-right-left-outlined.svelte';
+	import PinOutlined from '$lib/components/central-icons/pin-outlined.svelte';
+	import Embeds from '$lib/components/embeds/embeds.svelte';
+	import RichtextRenderer from '$lib/components/richtext-renderer.svelte';
+
+	import PostMeta from './post-meta.svelte';
+	import PostMetrics from './post-metrics.svelte';
+
+	interface Props {
+		item: UiTimelineItem;
+	}
+
+	const { item }: Props = $props();
+
+	const post = $derived(item.post);
+
+	const author = $derived(post.author);
+	const authorUrl = $derived(`${base}/${author.did}`);
+
+	const record = $derived(post.record as AppBskyFeedPost.Record);
+	const postUrl = $derived(`${base}/${author.did}/${parseAtUri(post.uri).rkey}#main`);
+</script>
+
+<div class={['post-feed-item', !item.next && `is-leaf`]}>
+	<div class="contexts">
+		{#if item.prev}
+			<div class="ascendant-line-wrapper">
+				<div class="line"></div>
+			</div>
+		{/if}
+
+		{#if item.reason}
+			{@const reason = item.reason}
+
+			{#if reason.$type === 'app.bsky.feed.defs#reasonRepost'}
+				{@const by = reason.by}
+
+				<div class="context">
+					<div class="aside">
+						<ArrowsRepeatRightLeftOutlined />
+					</div>
+					<a href="/{by.did}" class="main">
+						<span dir="auto" class="name">{by.displayName?.trim() || by.handle.slice(0, 64)}</span>
+						<span class="affix">{' '}reposted</span>
+					</a>
+				</div>
+			{:else if reason.$type === 'app.bsky.feed.defs#reasonPin'}
+				<div class="context">
+					<div class="aside">
+						<PinOutlined />
+					</div>
+					<span class="main">Pinned</span>
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	<div class="content">
+		<div class="aside">
+			<a tabindex={-1} href={authorUrl} class="avatar-wrapper">
+				{#if author.avatar}
+					<img loading="lazy" src={author.avatar} alt="" class="avatar" />
+				{/if}
+			</a>
+
+			{#if item.next}
+				<div class="descendant-line"></div>
+			{/if}
+		</div>
+
+		<div class="main">
+			<PostMeta {post} {postUrl} {authorUrl} gutterBottom />
+
+			{#if !item.prev && record.reply}
+				{@const parent = item.reply?.parent}
+
+				<p class="reply-context">
+					{#if parent && parent.$type === 'app.bsky.feed.defs#postView'}
+						{@const author = parent.author}
+
+						Replying to
+						<a href="/{author.did}" dir="auto">
+							{author.displayName?.trim() || `@${author.handle}`}
+						</a>
+					{:else}
+						Replying to an unknown post
+					{/if}
+				</p>
+			{/if}
+
+			<RichtextRenderer text={record.text} facets={record.facets} />
+
+			{#if post.embed}
+				<Embeds embed={post.embed} />
+			{/if}
+
+			<PostMetrics {post} />
+		</div>
+	</div>
+</div>
+
+<style>
+	.post-feed-item {
+		contain: content;
+		padding: 0 16px;
+
+		/* content-visibility: auto; */
+		/* contain-intrinsic-height: 99px; */
+
+		@media (hover: hover) {
+			&:hover {
+				background: var(--tap-sm);
+			}
+		}
+	}
+	.is-leaf {
+		border-bottom: 1px solid var(--divider-sm);
+	}
+
+	.ascendant-line-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 36px;
+
+		.line {
+			position: absolute;
+			top: 0;
+			bottom: 4px;
+			flex-grow: 1;
+			border-left: 2px solid var(--divider-md);
+		}
+	}
+	.descendant-line {
+		flex-grow: 1;
+		margin-top: 4px;
+		border-left: 2px solid var(--divider-md);
+	}
+
+	.contexts {
+		display: flex;
+		position: relative;
+		flex-direction: column;
+		padding: 8px 0 4px 0;
+	}
+	.context {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		color: var(--text-blurb);
+		font-size: 0.8125rem;
+		line-height: 1.25rem;
+
+		.aside {
+			display: flex;
+			flex-shrink: 0;
+			justify-content: flex-end;
+			width: 36px;
+		}
+
+		.main {
+			display: flex;
+			min-width: 0px;
+			color: inherit;
+
+			&[href]:hover {
+				text-decoration-line: underline;
+			}
+		}
+
+		.name {
+			overflow: hidden;
+			font-weight: 500;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.affix {
+			flex-shrink: 0;
+			white-space: pre;
+		}
+	}
+
+	.content {
+		display: flex;
+		gap: 12px;
+
+		.aside {
+			display: flex;
+			flex-shrink: 0;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.main {
+			flex-grow: 1;
+			padding-bottom: 12px;
+			min-width: 0;
+		}
+	}
+
+	.avatar-wrapper {
+		display: block;
+		border-radius: 9999px;
+		background: var(--bg-secondary);
+		width: 36px;
+		height: 36px;
+		overflow: hidden;
+
+		&:hover {
+			filter: brightness(0.85);
+		}
+	}
+	.avatar {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		font-size: 0;
+	}
+
+	.reply-context {
+		overflow: hidden;
+		color: var(--text-blurb);
+		font-size: 0.8125rem;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		a {
+			color: inherit;
+			font-weight: 500;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+</style>

src/lib/components/timeline/post-meta.svelte

···
+<script lang="ts">
+	import type { AppBskyFeedDefs, AppBskyFeedPost } from '@atcute/client/lexicons';
+
+	import { formatLongDate, formatRelativeTime } from '$lib/utils/intl/date';
+
+	interface Props {
+		post: AppBskyFeedDefs.PostView;
+		postUrl: string;
+		authorUrl: string;
+		gutterBottom?: boolean;
+	}
+
+	const { post, postUrl, authorUrl, gutterBottom = false }: Props = $props();
+
+	const author = $derived(post.author);
+	const authorName = $derived(author.displayName?.trim());
+
+	const createdAt = $derived((post.record as AppBskyFeedPost.Record).createdAt);
+</script>
+
+<div class={['post-meta', gutterBottom && 'has-bottom-gutter']}>
+	<a href={authorUrl} class="name-wrapper">
+		{#if authorName}
+			<bdi class="display-name-wrapper">
+				<span class="display-name">{authorName}</span>
+			</bdi>
+		{/if}
+
+		<span class="handle">@{author.handle}</span>
+	</a>
+
+	<span aria-hidden="true" class="dot"> · </span>
+
+	<a href={postUrl} title={formatLongDate(createdAt)} class="date">
+		<time datetime={createdAt}>{formatRelativeTime(createdAt)}</time>
+	</a>
+</div>
+
+<style>
+	.post-meta {
+		display: flex;
+		align-items: center;
+		color: var(--text-blurb);
+	}
+	.has-bottom-gutter {
+		margin-bottom: 2px;
+	}
+
+	.name-wrapper {
+		display: flex;
+		gap: 4px;
+		max-width: 100%;
+		overflow: hidden;
+		color: inherit;
+		text-decoration: none;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.display-name-wrapper {
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		.name-wrapper:hover & {
+			text-decoration: underline;
+		}
+	}
+	.display-name {
+		color: var(--text-primary);
+		font-weight: 700;
+	}
+
+	.handle {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.dot {
+		flex-shrink: 0;
+		margin: 0 6px;
+	}
+
+	.date {
+		color: inherit;
+		text-decoration: none;
+		white-space: nowrap;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+</style>

src/lib/components/timeline/post-metrics.svelte

···
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	import type { AppBskyFeedDefs } from '@atcute/client/lexicons';
+
+	import { formatCompactNumber, formatLongNumber } from '$lib/utils/intl/number';
+
+	import ArrowsRepeatRightLeftOutlined from '$lib/components/central-icons/arrows-repeat-right-left-outlined.svelte';
+	import Bubble_2Outlined from '$lib/components/central-icons/bubble-2-outlined.svelte';
+	import HeartOutlined from '$lib/components/central-icons/heart-outlined.svelte';
+
+	interface Props {
+		post: AppBskyFeedDefs.PostView;
+	}
+
+	const { post }: Props = $props();
+
+	const replyCount = $derived(post.replyCount || 0);
+	const likeCount = $derived(post.likeCount || 0);
+	const repostCount = $derived((post.repostCount || 0) + (post.quoteCount || 0));
+</script>
+
+{#snippet Stat(count: number, Icon: Component, one: string, many: string)}
+	<div
+		title={count === 1 ? `${formatLongNumber(count)} ${one}` : `${formatLongNumber(count)} ${many}`}
+		class="stat"
+	>
+		<Icon />
+
+		<span class="count">
+			{formatCompactNumber(count)}
+		</span>
+	</div>
+{/snippet}
+
+<div class="post-metrics">
+	{@render Stat(replyCount, Bubble_2Outlined, 'reply', 'replies')}
+	{@render Stat(repostCount, ArrowsRepeatRightLeftOutlined, 'repost', 'reposts')}
+	{@render Stat(likeCount, HeartOutlined, 'like', 'likes')}
+</div>
+
+<style>
+	.post-metrics {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		margin-top: 12px;
+		color: var(--text-blurb);
+	}
+
+	.stat {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-width: 0px;
+		max-width: 100%;
+	}
+
+	.count {
+		padding-right: 8px;
+		overflow: hidden;
+		font-size: 0.8125rem;
+		line-height: 1.25rem;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

src/lib/models/thread.ts

···
+import type { Brand, AppBskyFeedDefs, AppBskyFeedPost } from '@atcute/client/lexicons';
+
+export const enum LineType {
+	// <empty>
+	NONE,
+	// │
+	VERTICAL,
+	// ├
+	VERTICAL_RIGHT,
+	// └
+	UP_RIGHT,
+}
+
+interface BaseAncestor {
+	id: string;
+	lines?: undefined;
+}
+
+export interface BlockedAncestorItem extends BaseAncestor {
+	type: 'blocked';
+	uri: string;
+}
+export interface NonexistentAncestorItem extends BaseAncestor {
+	type: 'nonexistent';
+	uri: string;
+}
+export interface OverflowAncestorItem extends BaseAncestor {
+	type: 'overflow';
+	uri: string;
+}
+export interface PostAncestorItem extends BaseAncestor {
+	type: 'post';
+	post: AppBskyFeedDefs.PostView;
+	prev: boolean;
+	next: boolean;
+}
+
+export type AncestorItem =
+	| BlockedAncestorItem
+	| NonexistentAncestorItem
+	| OverflowAncestorItem
+	| PostAncestorItem;
+
+interface BaseDescendant {
+	id: string;
+	lines: LineType[];
+}
+
+export interface BlockedDescendantItem extends BaseDescendant {
+	type: 'blocked';
+	uri: string;
+}
+export interface OverflowDescendantItem extends BaseDescendant {
+	type: 'overflow';
+	uri: string;
+}
+export interface PostDescendantItem extends BaseDescendant {
+	type: 'post';
+	post: AppBskyFeedDefs.PostView;
+	prev: boolean;
+	next: boolean;
+}
+
+export type DescendantItem = BlockedDescendantItem | OverflowDescendantItem | PostDescendantItem;
+
+export interface ThreadData {
+	post: AppBskyFeedDefs.PostView;
+	ancestors: AncestorItem[];
+	descendants: DescendantItem[];
+}
+
+export const createThreadData = ({
+	thread,
+	treeView,
+}: {
+	thread: Brand.Union<AppBskyFeedDefs.ThreadViewPost>;
+	treeView?: boolean;
+}): ThreadData => {
+	let ancestors: AncestorItem[];
+	let descendants: DescendantItem[];
+
+	{
+		let parent = thread.parent;
+
+		ancestors = [];
+
+		while (parent) {
+			const type = parent.$type;
+			if (type === 'app.bsky.feed.defs#blockedPost') {
+				const uri = parent.uri;
+
+				ancestors.push({ id: uri, type: 'blocked', uri: uri });
+			} else if (type === 'app.bsky.feed.defs#notFoundPost') {
+				const uri = parent.uri;
+
+				ancestors.push({ id: uri, type: 'nonexistent', uri: uri });
+			} else if (type === 'app.bsky.feed.defs#threadViewPost') {
+				const post = parent.post;
+
+				ancestors.push({ id: post.uri, type: 'post', post: post, prev: true, next: true });
+				parent = parent.parent;
+
+				continue;
+			}
+
+			break;
+		}
+
+		{
+			const last = ancestors[ancestors.length - 1];
+
+			if (last && last.type === 'post') {
+				const post = last.post;
+				const reply = (post.record as AppBskyFeedPost.Record).reply;
+
+				if (reply) {
+					const uri = reply.parent.uri;
+
+					ancestors.push({ id: uri, type: 'overflow', uri: uri });
+				} else {
+					last.prev = false;
+				}
+			}
+		}
+
+		ancestors.reverse();
+	}
+
+	{
+		const traverse = (
+			parent: AppBskyFeedDefs.PostView,
+			replies: AppBskyFeedDefs.ThreadViewPost['replies'] | undefined,
+			depth: number,
+			lines: LineType[],
+		): DescendantItem[] => {
+			if (!replies || replies.length === 0) {
+				if (depth !== 0 && parent.replyCount) {
+					return [
+						{
+							id: 'overflow-' + parent.uri,
+							type: 'overflow',
+							uri: parent.uri,
+							lines: treeView ? lines.concat(LineType.UP_RIGHT) : lines,
+						},
+					];
+				}
+
+				return [];
+			}
+
+			// Filter the replies to only what we want
+			const items = replies.filter(
+				(x): x is Brand.Union<AppBskyFeedDefs.ThreadViewPost | AppBskyFeedDefs.BlockedPost> => {
+					const type = x.$type;
+
+					return type === 'app.bsky.feed.defs#threadViewPost' || type === 'app.bsky.feed.defs#blockedPost';
+				},
+			);
+
+			// Sort the replies
+			const did = parent.author.did;
+			items.sort((a, b) => {
+				if (a.$type !== 'app.bsky.feed.defs#threadViewPost') {
+					return 1;
+				}
+				if (b.$type !== 'app.bsky.feed.defs#threadViewPost') {
+					return -1;
+				}
+
+				const aPost = a.post;
+				const aAuthor = aPost.author;
+				const aIndexed = new Date(aPost.indexedAt).getTime();
+
+				const bPost = b.post;
+				const bAuthor = bPost.author;
+				const bIndexed = new Date(aPost.indexedAt).getTime();
+
+				// Prioritize replies from parent's author
+				{
+					const aIsByOp = aAuthor.did === did;
+					const bIsByOp = bAuthor.did === did;
+
+					if (aIsByOp && bIsByOp) {
+						// Prioritize oldest first for own reply
+						return aIndexed - bIndexed;
+					} else if (aIsByOp) {
+						return -1;
+					} else if (bIsByOp) {
+						return 1;
+					}
+				}
+
+				return getHotness(bPost, bIndexed) - getHotness(aPost, aIndexed);
+			});
+
+			// Iterate through the replies
+			const array: DescendantItem[] = [];
+			for (let idx = 0, len = items.length; idx < len; idx++) {
+				const reply = items[idx];
+				const type = reply.$type;
+
+				const end = idx === len - 1;
+				const nlines =
+					treeView && depth !== 0 ? lines.concat(end ? LineType.UP_RIGHT : LineType.VERTICAL_RIGHT) : lines;
+
+				if (type === 'app.bsky.feed.defs#threadViewPost') {
+					const post = reply.post;
+					const children = traverse(
+						post,
+						reply.replies,
+						depth + 1,
+						treeView && depth !== 0 ? lines.concat(end ? LineType.NONE : LineType.VERTICAL) : lines,
+					);
+
+					array.push({
+						id: post.uri,
+						type: 'post',
+						post: post,
+						prev: depth !== 0,
+						next: children.length !== 0,
+						lines: nlines,
+					});
+
+					push(array, children);
+				} else if (type === 'app.bsky.feed.defs#blockedPost') {
+					array.push({
+						id: reply.uri,
+						type: 'blocked',
+						uri: reply.uri,
+						lines: nlines,
+					});
+				}
+
+				if (!treeView && depth !== 0) {
+					break;
+				}
+			}
+
+			return array;
+		};
+
+		descendants = traverse(thread.post, thread.replies, 0, []);
+	}
+
+	return {
+		post: thread.post,
+		ancestors: ancestors,
+		descendants: descendants,
+	};
+};
+
+const push = <T>(target: T[], source: T[]) => {
+	for (let idx = 0, len = source.length; idx < len; idx++) {
+		const item = source[idx];
+		target.push(item);
+	}
+};
+
+// https://github.com/bluesky-social/social-app/blob/e9a792e4c1e85760fd073def21aa9e921e3afa3c/src/state/queries/post-thread.ts#L276
+const getHotness = (post: AppBskyFeedDefs.PostView, indexedAt: number) => {
+	const hoursAgo = (Date.now() - indexedAt) / (1000 * 60 * 60);
+
+	const likeCount = post.likeCount ?? 0;
+	const likeOrder = Math.log(3 + likeCount);
+	const timePenaltyExponent = 1.5 + 1.5 / (1 + Math.log(1 + likeCount));
+	const timePenalty = Math.pow(hoursAgo + 2, timePenaltyExponent);
+
+	return likeOrder / timePenalty;
+};

src/lib/models/timeline.ts

···
+import type { AppBskyFeedDefs } from '@atcute/client/lexicons';
+
+export type TimelineItem = AppBskyFeedDefs.FeedViewPost;
+
+// #region TimelineSlice
+export interface TimelineSlice {
+	items: TimelineItem[];
+}
+
+// #region UiTimelineItem
+const enum TimelineFlags {
+	HAS_PREV = 1 << 0,
+	HAS_NEXT = 1 << 1,
+	IS_REPOSTED = 1 << 2,
+	IS_PINNED = 1 << 3,
+}
+
+export interface UiTimelineItem extends TimelineItem {
+	id: string;
+	prev: boolean;
+	next: boolean;
+}
+
+// #region Filters
+export type SliceFilter = (slice: TimelineSlice) => boolean | TimelineSlice[];
+export type PostFilter = (item: TimelineItem) => boolean;
+
+const isNextInThread = (slice: TimelineSlice, item: TimelineItem) => {
+	const items = slice.items;
+	const last = items[items.length - 1];
+
+	const parent = item.reply?.parent;
+
+	return parent?.$type === 'app.bsky.feed.defs#postView' && last.post.cid == parent.cid;
+};
+
+const isFirstInThread = (slice: TimelineSlice, item: TimelineItem) => {
+	const items = slice.items;
+	const first = items[0];
+
+	const parent = first.reply?.parent;
+
+	return parent?.$type === 'app.bsky.feed.defs#postView' && parent.cid === item.post.cid;
+};
+
+export const createJoinedItems = (
+	arr: TimelineItem[],
+	filterSlice?: SliceFilter,
+	filterPost?: PostFilter,
+): UiTimelineItem[] => {
+	let slices: TimelineSlice[] = [];
+	let jlen = 0;
+
+	// arrange the posts into connected slices
+	loop: for (let i = arr.length - 1; i >= 0; i--) {
+		const item = arr[i];
+
+		if (filterPost && !filterPost(item)) {
+			continue;
+		}
+
+		// if we find a matching slice and it's currently not in front, then bump
+		// it to the front. this is so that new reply don't get buried away because
+		// there's multiple posts separating it and the parent post.
+		for (let j = 0; j < jlen; j++) {
+			const slice = slices[j];
+
+			// skip, we already have too much.
+			if (slice.items.length >= 7) {
+				continue;
+			}
+
+			if (isFirstInThread(slice, item)) {
+				slice.items.unshift(item);
+
+				if (j !== 0) {
+					slices.splice(j, 1);
+					slices.unshift(slice);
+				}
+
+				continue loop;
+			} else if (isNextInThread(slice, item)) {
+				slice.items.push(item);
+
+				if (j !== 0) {
+					slices.splice(j, 1);
+					slices.unshift(slice);
+				}
+
+				continue loop;
+			}
+		}
+
+		slices.unshift({ items: [item] });
+		jlen++;
+	}
+
+	if (filterSlice && jlen > 0) {
+		const unfiltered = slices;
+		slices = [];
+
+		for (let j = 0; j < jlen; j++) {
+			const slice = unfiltered[j];
+			const result = filterSlice(slice);
+
+			if (result) {
+				if (Array.isArray(result)) {
+					for (let k = 0, klen = result.length; k < klen; k++) {
+						const slice = result[k];
+						slices.push(slice);
+					}
+				} else {
+					slices.push(slice);
+				}
+			}
+		}
+	}
+
+	return slices.flatMap((slice) => {
+		const arr = slice.items;
+		const len = arr.length;
+
+		return arr.map((item, idx): UiTimelineItem => {
+			const post = item.post;
+			const reason = item.reason;
+
+			let flags = 0;
+
+			if (idx !== 0) {
+				flags |= TimelineFlags.HAS_PREV;
+			}
+			if (idx !== len - 1) {
+				flags |= TimelineFlags.HAS_NEXT;
+			}
+
+			switch (reason?.$type) {
+				case 'app.bsky.feed.defs#reasonRepost': {
+					flags |= TimelineFlags.IS_REPOSTED;
+					break;
+				}
+				case 'app.bsky.feed.defs#reasonPin': {
+					flags |= TimelineFlags.IS_PINNED;
+					break;
+				}
+			}
+
+			return {
+				...item,
+				id: `${post.author.did}-${post.cid}-${flags}`,
+				prev: !!(flags & TimelineFlags.HAS_PREV),
+				next: !!(flags & TimelineFlags.HAS_NEXT),
+			};
+		});
+	});
+};

src/lib/queries/handle.ts

···
+import type { XRPC } from '@atcute/client';
+
+import type { Did } from '$lib/types/identity';
+
+export const resolveHandle = async ({ rpc, handle }: { rpc: XRPC; handle: string }): Promise<Did> => {
+	const { data } = await rpc.get('com.atproto.identity.resolveHandle', {
+		params: { handle },
+	});
+
+	// because my types are stricter than atcute's
+	return data.did as Did;
+};

src/lib/queries/timeline.ts

···
+import type { XRPC } from '@atcute/client';
+import type {
+	AppBskyActorDefs,
+	AppBskyEmbedRecord,
+	AppBskyFeedDefs,
+	AppBskyFeedGetTimeline,
+	AppBskyFeedPost,
+} from '@atcute/client/lexicons';
+
+import {
+	createJoinedItems,
+	type PostFilter,
+	type SliceFilter,
+	type TimelineItem,
+	type TimelineSlice,
+	type UiTimelineItem,
+} from '$lib/models/timeline';
+import type { AtUri } from '$lib/types/at-uri';
+import type { Did } from '$lib/types/identity';
+import { assertNever } from '$lib/utils/invariant';
+
+type PostRecord = AppBskyFeedPost.Record;
+
+export const enum TimelineType {
+	PROFILE,
+	CUSTOM_FEED,
+	USER_LIST,
+}
+
+export const enum ProfileFilter {
+	POSTS,
+	POSTS_WITH_REPLIES,
+	MEDIA,
+}
+
+export interface ProfileTimelineParams {
+	type: TimelineType.PROFILE;
+	actor: Did;
+	filter: ProfileFilter;
+	cursor?: string;
+}
+
+export interface CustomFeedTimelineParams {
+	type: TimelineType.CUSTOM_FEED;
+	feed: AtUri;
+	cursor?: string;
+}
+
+export interface UserListTimelineParams {
+	type: TimelineType.USER_LIST;
+	list: AtUri;
+	cursor?: string;
+}
+
+export type TimelineParams = ProfileTimelineParams | CustomFeedTimelineParams | UserListTimelineParams;
+
+export interface TimelinePage {
+	cursor: string | undefined;
+	items: UiTimelineItem[];
+}
+
+const PAGE_LIMIT = 50;
+
+export const fetchTimeline = async ({
+	rpc,
+	params,
+}: {
+	rpc: XRPC;
+	params: TimelineParams;
+}): Promise<TimelinePage> => {
+	let sliceFilter: SliceFilter | undefined;
+	let postFilter: PostFilter | undefined;
+
+	let timeline: AppBskyFeedGetTimeline.Output;
+
+	switch (params.type) {
+		case TimelineType.PROFILE: {
+			const { data } = await rpc.get('app.bsky.feed.getAuthorFeed', {
+				params: {
+					actor: params.actor,
+					cursor: params.cursor,
+					limit: PAGE_LIMIT,
+					includePins: params.filter !== ProfileFilter.MEDIA,
+					filter:
+						params.filter === ProfileFilter.MEDIA
+							? 'posts_with_media'
+							: params.filter === ProfileFilter.POSTS_WITH_REPLIES
+								? 'posts_with_replies'
+								: 'posts_and_author_threads',
+				},
+			});
+
+			timeline = data;
+
+			if (params.filter === ProfileFilter.POSTS) {
+				sliceFilter = createProfileSliceFilter(params.actor);
+			}
+
+			break;
+		}
+		case TimelineType.CUSTOM_FEED: {
+			const { data } = await rpc.get('app.bsky.feed.getFeed', {
+				params: {
+					feed: params.feed,
+					cursor: params.cursor,
+					limit: PAGE_LIMIT,
+				},
+			});
+
+			timeline = {
+				// Discover feed, wooo.
+				cursor: data.cursor && data.cursor.length <= 5_000 ? data.cursor : undefined,
+				feed: data.feed,
+			};
+
+			break;
+		}
+		case TimelineType.USER_LIST: {
+			const { data } = await rpc.get('app.bsky.feed.getListFeed', {
+				params: {
+					list: params.list,
+					cursor: params.cursor,
+					limit: PAGE_LIMIT,
+				},
+			});
+
+			timeline = data;
+			break;
+		}
+		default: {
+			assertNever(params);
+		}
+	}
+
+	const page: TimelinePage = {
+		// Prevent fetching the same data over and over
+		cursor: timeline.cursor !== params.cursor ? timeline.cursor : undefined,
+		items: createJoinedItems(timeline.feed, sliceFilter, postFilter),
+	};
+
+	return page;
+};
+
+// #region Post filters
+
+// #region Slice filters
+const createProfileSliceFilter = (did: Did): SliceFilter | undefined => {
+	return (slice) => {
+		const items = slice.items;
+		const first = items[0];
+
+		const reply = first.reply;
+		const reason = first.reason;
+
+		// Skip any posts that doesn't seem to look like a self-thread
+		if (reply && (!reason || reason.$type !== 'app.bsky.feed.defs#reasonRepost')) {
+			for (const author of getReplyAuthors(reply)) {
+				if (!author) {
+					continue;
+				}
+
+				if (author.did !== did) {
+					return yankReposts(items);
+				}
+			}
+		}
+
+		return true;
+	};
+};
+
+// #region Utilities
+/** Get the reposts out of the gutter */
+const yankReposts = (items: TimelineItem[]): TimelineSlice[] | false => {
+	let slices: TimelineSlice[] | false = false;
+	let last: TimelineItem[] | undefined;
+
+	for (let idx = 0, len = items.length; idx < len; idx++) {
+		const item = items[idx];
+		const reason = item.reason;
+
+		if (reason && reason.$type === 'app.bsky.feed.defs#reasonRepost') {
+			if (last) {
+				last.push(item);
+			} else {
+				(slices ||= []).push({ items: (last = [item]) });
+			}
+		} else {
+			last = undefined;
+		}
+	}
+
+	return slices;
+};
+
+const getReplyAuthors = ({ root, grandparentAuthor, parent }: AppBskyFeedDefs.ReplyRef) => {
+	const authors: AppBskyActorDefs.ProfileViewBasic[] = [];
+
+	if (root.$type === 'app.bsky.feed.defs#postView') {
+		authors.push(root.author);
+	}
+
+	if (grandparentAuthor) {
+		authors.push(grandparentAuthor);
+	}
+
+	if (parent.$type === 'app.bsky.feed.defs#postView') {
+		authors.push(parent.author);
+	}
+
+	return authors;
+};
+
+const getRecordEmbed = (embed: PostRecord['embed']): AppBskyEmbedRecord.Main | undefined => {
+	if (embed) {
+		if (embed.$type === 'app.bsky.embed.record') {
+			return embed;
+		}
+
+		if (embed.$type === 'app.bsky.embed.recordWithMedia') {
+			return embed.record;
+		}
+	}
+};
+
+const getRecordEmbedView = (embed: AppBskyFeedDefs.PostView['embed']) => {
+	if (embed) {
+		if (embed.$type === 'app.bsky.embed.record#view') {
+			return embed.record;
+		}
+
+		if (embed.$type === 'app.bsky.embed.recordWithMedia#view') {
+			return embed.record.record;
+		}
+	}
+};

src/lib/styles/app.css

···
+:root {
+	--accent: #1d9bf0;
+	--accent-text: #ffffff;
+
+	--text-primary: #0f1419;
+	--text-blurb: #536471;
+	--text-link: var(--accent);
+
+	--bg-slate: #e6ecf0;
+	--bg-primary: #ffffff;
+	--bg-secondary: #cfd9de;
+
+	--divider-sm: #eff3f4;
+	--divider-md: #cfd9de;
+
+	--tap: var(--text-primary);
+}
+
+:root {
+	--tap-sm: rgb(from var(--tap) r g b / 0.03);
+	--tap-sm-pressed: rgb(from var(--tap) r g b / 0.07);
+	--tap-md: rgb(from var(--tap) r g b / 0.1);
+	--tap-md-pressed: rgb(from var(--tap) r g b / 0.2);
+}
+
+body {
+	background: var(--bg-slate);
+	overflow-y: scroll;
+	color: var(--text-primary);
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	font-family: sans-serif;
+}
+
+:where(*, *::before, *::after) {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+:where(a) {
+	color: var(--text-link);
+	text-decoration: none;
+}
+
+.sv-icon {
+	flex-shrink: 0;
+	width: 1em;
+	height: 1em;
+}

src/lib/types/at-uri.ts

···
+import type { Records } from '@atcute/client/lexicons';
+
+import { assert } from '$lib/utils/invariant';
+
+import type { Did } from './identity';
+
+export type AtUri = `at://${string}`;
+
+export const ATURI_RE =
+	/^at:\/\/(did:[a-z]+:[a-zA-Z0-9._:%\-]*[a-zA-Z0-9._\-]|(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z][a-zA-Z0-9-]{0,61}[a-zA-Z0-9])\/([a-zA-Z0-9-.]+)\/((?!\.{1,2}$)[a-zA-Z0-9_~.:-]{1,512})(?:#(\/[a-zA-Z0-9._~:@!$&%')(*+,;=\-[\]/\\]*))?$/;
+
+export interface ParsedAtUri {
+	repo: string;
+	collection: string;
+	rkey: string;
+	fragment: string | undefined;
+}
+
+export const parseAtUri = (str: string): ParsedAtUri => {
+	const match = ATURI_RE.exec(str);
+	assert(match !== null, `failed to parse at-uri for ${str}`);
+
+	return {
+		repo: match[1] as Did,
+		collection: match[2],
+		rkey: match[3],
+		fragment: match[4],
+	};
+};
+
+export const makeAtUri = (repo: string, collection: keyof Records | (string & {}), rkey: string) => {
+	return `at://${repo}/${collection}/${rkey}`;
+};

src/lib/types/identity.ts

···
+export type Handle = `${string}.${string}`;
+
+const HANDLE_RE =
+	/^(?=.{4,253}$)(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z][a-zA-Z0-9-]{0,61}[a-zA-Z0-9])$/;
+
+export const isHandle = (input: string): input is Handle => {
+	return input.length >= 3 && input.length <= 253 && HANDLE_RE.test(input);
+};
+
+export type Did<TMethod extends string = string> = `did:${TMethod}:${string}`;
+export type AtprotoDid = Did<'plc' | 'web'>;
+
+export const DID_RE = /^(?=.{7,2048}$)did:([a-z]+):([a-zA-Z0-9._:%\-]*[a-zA-Z0-9._\-])$/;
+
+export const isDid = (input: string): input is Did => {
+	return input.length >= 7 && input.length <= 2048 && DID_RE.test(input);
+};

src/lib/types/rkey.ts

···
+export const RECORD_KEY_RE = /(?!\.{1,2}$)[a-zA-Z0-9_~.:-]{1,512}/;
+
+export const isRecordKey = (input: string) => {
+	return input.length >= 1 && input.length <= 512 && RECORD_KEY_RE.test(input);
+};
+
+export const TID_RE = /^[234567abcdefghij][234567abcdefghijklmnopqrstuvwxyz]{12}$/;
+
+export const isTid = (input: string) => {
+	return input.length === 13 && TID_RE.test(input);
+};

src/lib/utils/intl/date.ts

···
+import { createSubscriber } from 'svelte/reactivity';
+
+const reactiveNow = (() => {
+	let subscribed = false;
+	let now = 0;
+
+	const subscribe = createSubscriber((update) => {
+		// updates every ~minute
+		const interval = setInterval(() => {
+			now = Date.now();
+			update();
+		}, 60_000);
+
+		subscribed = true;
+		now = Date.now();
+
+		return () => {
+			clearInterval(interval);
+			subscribed = false;
+		};
+	});
+
+	return () => {
+		subscribe();
+		return subscribed ? now : Date.now();
+	};
+})();
+
+let startOfYear = 0;
+let endOfYear = 0;
+
+const fmtAbsoluteLong = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyle: 'short' });
+const fmtAbsShortWithYear = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' });
+const fmtAbsShort = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric' });
+
+export const formatShortDate = (date: string | number): string => {
+	const inst = new Date(date);
+	const time = inst.getTime();
+
+	if (isNaN(time)) {
+		return 'N/A';
+	}
+
+	const now = Date.now();
+	if (now > endOfYear) {
+		const date = new Date(now);
+
+		date.setMonth(0, 1);
+		date.setHours(0, 0, 0);
+		startOfYear = date.getTime();
+
+		date.setFullYear(date.getFullYear() + 1, 0, 0);
+		date.setHours(23, 59, 59, 999);
+		endOfYear = date.getTime();
+	}
+
+	if (time >= startOfYear && time <= endOfYear) {
+		return fmtAbsShort.format(inst);
+	}
+
+	return fmtAbsShortWithYear.format(inst);
+};
+
+export const formatLongDate = (date: string | number): string => {
+	const inst = new Date(date);
+
+	if (isNaN(inst.getTime())) {
+		return 'N/A';
+	}
+
+	return fmtAbsoluteLong.format(inst);
+};
+
+const relativeFormatters: Record<string, Intl.NumberFormat> = {};
+
+const SECOND = 1e3;
+const NOW = SECOND * 10;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+const WEEK = DAY * 7;
+
+export const formatRelativeTime = (date: string | number): string => {
+	const time = new Date(date).getTime();
+
+	const now = reactiveNow();
+	const delta = now - time;
+
+	if (delta < -NOW || delta > WEEK) {
+		if (now > endOfYear) {
+			const date = new Date();
+
+			date.setMonth(0, 1);
+			date.setHours(0, 0, 0);
+			startOfYear = date.getTime();
+
+			date.setFullYear(date.getFullYear() + 1, 0, 0);
+			date.setHours(23, 59, 59, 999);
+			endOfYear = date.getTime();
+		}
+
+		// if it happened this year, don't show the year.
+		if (time >= startOfYear && time <= endOfYear) {
+			return fmtAbsShort.format(time);
+		}
+
+		return fmtAbsShortWithYear.format(time);
+	}
+
+	if (delta < NOW) {
+		return `now`;
+	}
+
+	{
+		let value: number;
+		let unit: Intl.RelativeTimeFormatUnit;
+
+		if (delta < MINUTE) {
+			value = Math.floor(delta / SECOND);
+			unit = 'second';
+		} else if (delta < HOUR) {
+			value = Math.floor(delta / MINUTE);
+			unit = 'minute';
+		} else if (delta < DAY) {
+			value = Math.floor(delta / HOUR);
+			unit = 'hour';
+		} else {
+			// use rounding, this handles the following scenario:
+			// - 2024-02-13T09:00Z <- 2024-02-15T07:00Z = 2d
+			value = Math.round(delta / DAY);
+			unit = 'day';
+		}
+
+		const formatter = (relativeFormatters[unit] ||= new Intl.NumberFormat('en-US', {
+			style: 'unit',
+			unit: unit,
+			unitDisplay: 'narrow',
+		}));
+
+		return formatter.format(Math.abs(value));
+	}
+};

src/lib/utils/intl/number.ts

···
+const long = new Intl.NumberFormat('en-US');
+const compact = new Intl.NumberFormat('en-US', { notation: 'compact' });
+
+export const formatCompactNumber = (value: number) => {
+	if (value < 1_000) {
+		return '' + value;
+	}
+
+	if (value < 100_000) {
+		return long.format(value);
+	}
+
+	return compact.format(value);
+};
+
+export const formatLongNumber = (value: number) => {
+	return long.format(value);
+};

src/lib/utils/invariant.ts

···
+export function assert(condition: any, message?: string): asserts condition {
+	if (!condition) {
+		if (import.meta.env.DEV) {
+			throw new Error(`Assertion failed` + (message ? `: ${message}` : ``));
+		}
+
+		throw new Error(`Assertion failed`);
+	}
+}
+
+export function assertNever(value: never, message?: string): never {
+	assert(false, message);
+}

src/lib/utils/strings.ts

···
+export const truncateMiddle = (text: string, max: number): string => {
+	const len = text.length;
+
+	if (len <= max) {
+		return text;
+	}
+
+	const left = Math.ceil((max - 1) / 2);
+	const right = Math.floor((max - 1) / 2);
+
+	return text.slice(0, left) + '…' + text.slice(len - right);
+};
+
+export const truncateRight = (text: string, max: number): string => {
+	if (text.length <= max) {
+		return text;
+	}
+
+	return text.slice(0, max - 1) + '…';
+};

src/params/did.ts

···
+import type { ParamMatcher } from '@sveltejs/kit';
+
+import { isDid } from '$lib/types/identity';
+
+export const match = isDid satisfies ParamMatcher;

src/params/didOrHandle.ts

···
+import type { ParamMatcher } from '@sveltejs/kit';
+
+import { isDid, isHandle, type Did, type Handle } from '$lib/types/identity';
+
+export const match = ((param: string): param is Did | Handle => {
+	return isDid(param) || isHandle(param);
+}) satisfies ParamMatcher;

src/params/handle.ts

···
+import type { ParamMatcher } from '@sveltejs/kit';
+
+import { isHandle } from '$lib/types/identity';
+
+export const match = isHandle satisfies ParamMatcher;

src/params/rkey.ts

···
+import type { ParamMatcher } from '@sveltejs/kit';
+
+import { isRecordKey } from '$lib/types/rkey';
+
+export const match = isRecordKey satisfies ParamMatcher;

src/params/tid.ts

···
+import type { ParamMatcher } from '@sveltejs/kit';
+
+import { isTid } from '$lib/types/rkey';
+
+export const match = isTid satisfies ParamMatcher;

src/routes/(app)/(profile)/[actor=didOrHandle]/(timeline)/+layout.svelte

···
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	import { base } from '$app/paths';
+	import { page } from '$app/state';
+
+	import type { LayoutProps } from './$types';
+
+	const { data, children }: LayoutProps = $props();
+
+	const did = $derived(data.profile.did);
+	const currentRouteId = $derived(page.route.id);
+
+	const cn = (routeId: string): ClassValue => {
+		const id = `/(app)/(profile)/[actor=didOrHandle]/(timeline)${routeId}`;
+		return ['tab', currentRouteId === id && 'is-active'];
+	};
+</script>
+
+<div class="profile-tabs" data-sveltekit-keepfocus>
+	<a class={cn('')} href="{base}/{did}">Posts</a>
+	<a class={cn('/with_replies')} href="{base}/{did}/with_replies">Replies</a>
+	<a class={cn('/media')} href="{base}/{did}/media">Media</a>
+</div>
+
+{@render children()}
+
+<style>
+	.profile-tabs {
+		display: flex;
+		position: sticky;
+		top: 0;
+		flex-wrap: wrap;
+		z-index: 1;
+		border-bottom: 1px solid var(--divider-sm);
+		background: var(--bg-primary);
+	}
+
+	.tab {
+		padding: 12px 16px;
+		font-weight: 600;
+		font-size: 1rem;
+		line-height: 1.5rem;
+
+		&:hover {
+			text-decoration: underline;
+		}
+
+		&.is-active {
+			color: var(--text-primary);
+		}
+	}
+</style>

src/routes/(app)/(profile)/[actor=didOrHandle]/(timeline)/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/state';
+	import { PUBLIC_APP_NAME } from '$env/static/public';
+	import type { PageProps } from './$types';
+
+	import PageListing from '$lib/components/page/page-listing.svelte';
+	import PostFeedItem from '$lib/components/timeline/post-feed-item.svelte';
+
+	const { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>@{data.profile.handle} — {PUBLIC_APP_NAME}</title>
+</svelte:head>
+
+<PageListing subject="timeline" root={!page.url.searchParams.get('cursor')} cursor={data.timeline.cursor}>
+	{#each data.timeline.items as item (item.id)}
+		<PostFeedItem {item} />
+	{/each}
+</PageListing>

src/routes/(app)/(profile)/[actor=didOrHandle]/(timeline)/+page.ts

···
+import { simpleFetchHandler, XRPC } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+import { fetchTimeline, ProfileFilter, TimelineType } from '$lib/queries/timeline';
+import { isDid, type Did } from '$lib/types/identity';
+
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url, params, fetch, parent }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	let did: Did;
+	if (isDid(params.actor)) {
+		did = params.actor;
+	} else {
+		const parentData = await parent();
+		did = parentData.profile.did as Did;
+	}
+
+	const timeline = await fetchTimeline({
+		rpc,
+		params: {
+			type: TimelineType.PROFILE,
+			actor: did,
+			filter: ProfileFilter.POSTS,
+			cursor: url.searchParams.get('cursor') || undefined,
+		},
+	});
+
+	return { timeline };
+};

src/routes/(app)/(profile)/[actor=didOrHandle]/(timeline)/media/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/state';
+	import { PUBLIC_APP_NAME } from '$env/static/public';
+	import type { PageProps } from './$types';
+
+	import PageListing from '$lib/components/page/page-listing.svelte';
+	import PostFeedItem from '$lib/components/timeline/post-feed-item.svelte';
+
+	const { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>@{data.profile.handle} — {PUBLIC_APP_NAME}</title>
+</svelte:head>
+
+<PageListing subject="timeline" root={!page.url.searchParams.get('cursor')} cursor={data.timeline.cursor}>
+	{#each data.timeline.items as item (item.id)}
+		<PostFeedItem {item} />
+	{/each}
+</PageListing>

src/routes/(app)/(profile)/[actor=didOrHandle]/(timeline)/media/+page.ts

···
+import { simpleFetchHandler, XRPC } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+import { fetchTimeline, ProfileFilter, TimelineType } from '$lib/queries/timeline';
+import { isDid, type Did } from '$lib/types/identity';
+
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url, params, fetch, parent }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	let did: Did;
+	if (isDid(params.actor)) {
+		did = params.actor;
+	} else {
+		const parentData = await parent();
+		did = parentData.profile.did as Did;
+	}
+
+	const timeline = await fetchTimeline({
+		rpc,
+		params: {
+			type: TimelineType.PROFILE,
+			actor: did,
+			filter: ProfileFilter.MEDIA,
+			cursor: url.searchParams.get('cursor') || undefined,
+		},
+	});
+
+	return { timeline };
+};

src/routes/(app)/(profile)/[actor=didOrHandle]/(timeline)/with_replies/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/state';
+	import { PUBLIC_APP_NAME } from '$env/static/public';
+	import type { PageProps } from './$types';
+
+	import PageListing from '$lib/components/page/page-listing.svelte';
+	import PostFeedItem from '$lib/components/timeline/post-feed-item.svelte';
+
+	const { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>@{data.profile.handle} — {PUBLIC_APP_NAME}</title>
+</svelte:head>
+
+<PageListing subject="timeline" root={!page.url.searchParams.get('cursor')} cursor={data.timeline.cursor}>
+	{#each data.timeline.items as item (item.id)}
+		<PostFeedItem {item} />
+	{/each}
+</PageListing>

src/routes/(app)/(profile)/[actor=didOrHandle]/(timeline)/with_replies/+page.ts

···
+import { simpleFetchHandler, XRPC } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+import { fetchTimeline, ProfileFilter, TimelineType } from '$lib/queries/timeline';
+import { isDid, type Did } from '$lib/types/identity';
+
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url, params, fetch, parent }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	let did: Did;
+	if (isDid(params.actor)) {
+		did = params.actor;
+	} else {
+		const parentData = await parent();
+		did = parentData.profile.did as Did;
+	}
+
+	const timeline = await fetchTimeline({
+		rpc,
+		params: {
+			type: TimelineType.PROFILE,
+			actor: did,
+			filter: ProfileFilter.POSTS_WITH_REPLIES,
+			cursor: url.searchParams.get('cursor') || undefined,
+		},
+	});
+
+	return { timeline };
+};

src/routes/(app)/(profile)/[actor=didOrHandle]/+layout.svelte

···
+<script lang="ts">
+	import { base } from '$app/paths';
+	import { formatCompactNumber } from '$lib/utils/intl/number';
+	import type { LayoutProps } from './$types';
+
+	import ProfileAside from './components/profile-aside.svelte';
+
+	const { children, data }: LayoutProps = $props();
+
+	const profile = $derived(data.profile);
+	const did = $derived(profile.did);
+
+	const postCount = $derived(profile.postsCount ?? 0);
+</script>
+
+{#key profile.did}
+	<div class="profile-layout">
+		<div class="banner">
+			{#if profile.banner}
+				<img loading="lazy" src={profile.banner} alt="" class="banner-image" />
+			{/if}
+		</div>
+
+		<div class="aside">
+			<ProfileAside {profile} />
+
+			<div class="associations">
+				<a class="association" href="{base}/{did}">
+					<span class="association-count">{formatCompactNumber(postCount)}</span>
+					{postCount === 1 ? `post` : `posts`}
+				</a>
+
+				{#if profile.associated?.feedgens}
+					{@const count = profile.associated.feedgens}
+
+					<a class="association" href="{base}/{did}/feeds">
+						<span class="association-count">{formatCompactNumber(count)}</span>
+						{count === 1 ? `feed` : `feeds`}
+					</a>
+				{/if}
+				{#if profile.associated?.lists}
+					{@const count = profile.associated.lists}
+
+					<a class="association" href="{base}/{did}/lists">
+						<span class="association-count">{formatCompactNumber(count)}</span>
+						{count === 1 ? `list` : `lists`}
+					</a>
+				{/if}
+				{#if profile.associated?.starterPacks}
+					{@const count = profile.associated.starterPacks}
+
+					<a class="association" href="{base}/{did}/packs">
+						<span class="association-count">{formatCompactNumber(count)}</span>
+						{count === 1 ? `starter pack` : `starter packs`}
+					</a>
+				{/if}
+			</div>
+		</div>
+
+		<div class="main">
+			{@render children()}
+		</div>
+	</div>
+{/key}
+
+<style>
+	.profile-layout {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-areas: 'banner' 'aside' 'main';
+		justify-content: center;
+		gap: 8px;
+		margin: 24px auto 0;
+		max-width: 480px;
+
+		@media (width >= 640px) {
+			grid-template-columns: minmax(255px, 320px) minmax(0, 600px);
+			grid-template-areas: 'banner banner' 'aside main';
+			max-width: 960px;
+		}
+	}
+
+	.banner {
+		grid-area: banner;
+		background: var(--bg-secondary);
+		aspect-ratio: 3 / 1;
+		overflow: hidden;
+	}
+	.banner-image {
+		width: 100%;
+		height: 100%;
+		font-size: 0;
+	}
+
+	.aside {
+		display: flex;
+		grid-area: aside;
+		flex-direction: column;
+		gap: 8px;
+
+		@media (width >= 640px) {
+			position: sticky;
+			top: 0;
+			max-height: 100dvh;
+			overflow-y: auto;
+		}
+	}
+
+	.associations {
+		display: flex;
+		flex-direction: column;
+		background: var(--bg-primary);
+	}
+	.association {
+		padding: 10px 16px;
+		color: var(--text-blurb);
+
+		& + & {
+			border-top: 1px solid var(--divider-sm);
+		}
+
+		&:hover {
+			background: var(--tap-sm);
+		}
+	}
+	.association-count {
+		color: var(--text-primary);
+		font-weight: 600;
+	}
+
+	.main {
+		grid-area: main;
+		padding-bottom: 24px;
+	}
+</style>

src/routes/(app)/(profile)/[actor=didOrHandle]/+layout.ts

···
+import { XRPC, simpleFetchHandler } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async ({ params, fetch }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	const { data } = await rpc.get('app.bsky.actor.getProfile', {
+		params: {
+			actor: params.actor,
+		},
+	});
+
+	return {
+		profile: data,
+	};
+};

src/routes/(app)/(profile)/[actor=didOrHandle]/components/profile-aside.svelte

···
+<script lang="ts">
+	import type { AppBskyActorDefs } from '@atcute/client/lexicons';
+
+	import { base } from '$app/paths';
+
+	import RichtextRawRenderer from '$lib/components/richtext-raw-renderer.svelte';
+	import { formatCompactNumber } from '$lib/utils/intl/number';
+
+	interface Props {
+		profile: AppBskyActorDefs.ProfileViewDetailed;
+	}
+
+	const { profile }: Props = $props();
+
+	const did = $derived(profile.did);
+</script>
+
+<div class="profile-aside">
+	<div class="avatar-wrapper">
+		<img loading="lazy" src={profile.avatar} alt="" class="avatar" />
+	</div>
+
+	<div class="name-wrapper">
+		<p dir="auto" class="display-name">{profile.displayName?.trim() || profile.handle.slice(0, 64)}</p>
+		<p class="handle">@{profile.handle}</p>
+	</div>
+
+	{#if profile.description?.trim()}
+		<RichtextRawRenderer text={profile.description} />
+	{/if}
+
+	<div class="stats">
+		<a class="stat-entry" href="{base}/{did}/followers">
+			<span class="stat-count">{formatCompactNumber(profile.followersCount || 0)}</span>
+			<span> {profile.followersCount === 1 ? `Follower` : `Followers`}</span>
+		</a>
+
+		<a class="stat-entry" href="{base}/{did}/following">
+			<span class="stat-count">{formatCompactNumber(profile.followsCount || 0)}</span>
+			<span> Following</span>
+		</a>
+	</div>
+</div>
+
+<style>
+	.profile-aside {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		background: var(--bg-primary);
+		padding: 16px;
+		min-width: 0;
+	}
+
+	.avatar-wrapper {
+		flex-shrink: 0;
+		border-radius: 50%;
+		background: var(--bg-secondary);
+		aspect-ratio: 1 / 1;
+		width: 100%;
+		max-width: 90px;
+		overflow: hidden;
+	}
+	.avatar {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.display-name {
+		font-weight: 700;
+		font-size: 1.25rem;
+		line-height: 1.75rem;
+		overflow-wrap: break-word;
+	}
+	.handle {
+		color: var(--text-blurb);
+		overflow-wrap: break-word;
+	}
+
+	.stats {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20px;
+
+		min-width: 0;
+	}
+	.stat-entry {
+		color: var(--text-blurb);
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+	.stat-count {
+		color: var(--text-primary);
+		font-weight: 700;
+	}
+</style>

src/routes/(app)/(profile)/[actor=didOrHandle]/followers/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/state';
+	import { PUBLIC_APP_NAME } from '$env/static/public';
+	import type { PageProps } from './$types';
+
+	import PageHeader from '$lib/components/page/page-header.svelte';
+	import PageListing from '$lib/components/page/page-listing.svelte';
+	import ProfileItem from '$lib/components/profiles/profile-item.svelte';
+
+	const { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>Users following @{data.profile.handle} — {PUBLIC_APP_NAME}</title>
+</svelte:head>
+
+<PageHeader title="Followers" />
+
+<PageListing subject="profiles" root={!page.url.searchParams.get('cursor')} cursor={data.followers.cursor}>
+	{#each data.followers.items as profile (profile.did)}
+		<ProfileItem item={profile} />
+	{/each}
+</PageListing>

src/routes/(app)/(profile)/[actor=didOrHandle]/followers/+page.ts

···
+import { simpleFetchHandler, XRPC } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url, params, fetch }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	const { data } = await rpc.get('app.bsky.graph.getFollowers', {
+		params: {
+			actor: params.actor,
+			limit: 50,
+			cursor: url.searchParams.get('cursor') || undefined,
+		},
+	});
+
+	return { followers: { cursor: data.cursor, items: data.followers } };
+};

src/routes/(app)/(profile)/[actor=didOrHandle]/following/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/state';
+	import { PUBLIC_APP_NAME } from '$env/static/public';
+	import type { PageProps } from './$types';
+
+	import PageHeader from '$lib/components/page/page-header.svelte';
+	import PageListing from '$lib/components/page/page-listing.svelte';
+	import ProfileItem from '$lib/components/profiles/profile-item.svelte';
+
+	const { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>Users followed by @{data.profile.handle} — {PUBLIC_APP_NAME}</title>
+</svelte:head>
+
+<PageHeader title="Following" />
+
+<PageListing subject="profiles" root={!page.url.searchParams.get('cursor')} cursor={data.following.cursor}>
+	{#each data.following.items as profile (profile.did)}
+		<ProfileItem item={profile} />
+	{/each}
+</PageListing>

src/routes/(app)/(profile)/[actor=didOrHandle]/following/+page.ts

···
+import { simpleFetchHandler, XRPC } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url, params, fetch }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	const { data } = await rpc.get('app.bsky.graph.getFollows', {
+		params: {
+			actor: params.actor,
+			limit: 50,
+			cursor: url.searchParams.get('cursor') || undefined,
+		},
+	});
+
+	return { following: { cursor: data.cursor, items: data.follows } };
+};

src/routes/(app)/+layout.svelte

···
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	import '$lib/styles/app.css';
+
+	interface Props {
+		children: Snippet<[]>;
+	}
+
+	const { children }: Props = $props();
+</script>
+
+{@render children()}

src/routes/(app)/+page.svelte

···
+<div>Hello</div>

src/routes/(app)/[actor=didOrHandle]/[rkey=tid]/+page.svelte

···
+<script lang="ts">
+	import type { AppBskyFeedPost } from '@atcute/client/lexicons';
+
+	import { PUBLIC_APP_NAME } from '$env/static/public';
+	import type { PageProps } from './$types';
+
+	import { createThreadData } from '$lib/models/thread';
+	import { truncateMiddle, truncateRight } from '$lib/utils/strings';
+
+	import MainPost from '$lib/components/threads/main-post.svelte';
+	import OverflowThreadItem from '$lib/components/threads/overflow-thread-item.svelte';
+	import PostThreadItem from '$lib/components/threads/post-thread-item.svelte';
+
+	const { data }: PageProps = $props();
+
+	const treeView = true;
+	const thread = $derived.by(() => {
+		return createThreadData({ thread: data.thread, treeView });
+	});
+
+	const title = $derived.by(() => {
+		const post = thread.post;
+
+		const author = `@${truncateMiddle(post.author.handle, 29)}`;
+		const content = truncateRight((post.record as AppBskyFeedPost.Record).text.trim(), 70);
+
+		return `${author}: "${content}" — ${PUBLIC_APP_NAME}`;
+	});
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+</svelte:head>
+
+<div class={['thread-page', treeView ? 'is-tree' : 'is-flat']}>
+	<div class="ancestors">
+		{#each thread.ancestors as item (item.id)}
+			{#if item.type === 'post'}
+				<PostThreadItem {item} treeView={false} />
+			{:else if item.type === 'blocked'}
+				<div>blocked</div>
+			{:else if item.type === 'overflow'}
+				<OverflowThreadItem {item} treeView={false} descendant={false} />
+			{/if}
+		{/each}
+	</div>
+
+	<div class="thread">
+		<div class="main" id="main">
+			<MainPost post={thread.post} prev={thread.ancestors.length > 0} />
+		</div>
+
+		<div class="descendants">
+			{#each thread.descendants as item (item.id)}
+				{#if item.type === 'post'}
+					<PostThreadItem {item} {treeView} />
+				{:else if item.type === 'blocked'}
+					<div>blocked</div>
+				{:else if item.type === 'overflow'}
+					<OverflowThreadItem {item} {treeView} descendant={true} />
+				{/if}
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.thread-page {
+		display: flex;
+		flex-direction: column;
+		margin: 24px auto;
+		width: 100%;
+		max-width: 600px;
+	}
+
+	.thread {
+		min-height: calc(100dvh - (24px * 2));
+	}
+
+	.main,
+	.ancestors,
+	.descendants {
+		background: var(--bg-primary);
+	}
+
+	.main {
+		scroll-margin: 24px;
+	}
+
+	.ancestors {
+		&:empty {
+			display: none;
+		}
+	}
+
+	.descendants {
+		border-top: 1px solid var(--divider-md);
+
+		&:empty {
+			display: none;
+		}
+
+		.is-tree & {
+			padding: 4px 0;
+		}
+	}
+</style>

src/routes/(app)/[actor=didOrHandle]/[rkey=tid]/+page.ts

···
+import { simpleFetchHandler, XRPC, XRPCError } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+import type { PageLoad } from './$types';
+
+import { resolveHandle } from '$lib/queries/handle';
+import { makeAtUri } from '$lib/types/at-uri';
+import { isDid, type Did } from '$lib/types/identity';
+
+export const load: PageLoad = async ({ params }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	let did: Did;
+	if (!isDid(params.actor)) {
+		did = await resolveHandle({ rpc, handle: params.actor });
+	} else {
+		did = params.actor;
+	}
+
+	const uri = makeAtUri(did, 'app.bsky.feed.post', params.rkey);
+
+	// TODO: look previous pages for an existing post
+	{
+	}
+
+	const { data } = await rpc.get('app.bsky.feed.getPostThread', {
+		params: {
+			uri: uri,
+			depth: 4,
+			parentHeight: 10,
+		},
+	});
+
+	const thread = data.thread;
+
+	switch (thread.$type) {
+		case 'app.bsky.feed.defs#notFoundPost': {
+			throw new XRPCError(400, {
+				kind: 'NotFound',
+				description: `Post not found: ${uri}`,
+			});
+		}
+		case 'app.bsky.feed.defs#blockedPost': {
+			// shouldn't happen?
+			throw new XRPCError(400, {
+				kind: 'NotFound',
+				description: `Blocked post: ${uri}`,
+			});
+		}
+	}
+
+	return { thread };
+};

src/routes/(app)/[actor=didOrHandle]/feeds/[rkey=rkey]/+page.svelte

···
+<div>feeds</div>

src/routes/(app)/[actor=didOrHandle]/lists/[rkey=rkey]/+page.svelte

···
+<div>lists</div>

src/routes/(app)/[actor=did]/[rkey=tid]/likes/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/state';
+	import { PUBLIC_APP_NAME } from '$env/static/public';
+	import type { PageProps } from './$types';
+
+	import PageContainer from '$lib/components/page/page-container.svelte';
+	import PageHeader from '$lib/components/page/page-header.svelte';
+	import PageListing from '$lib/components/page/page-listing.svelte';
+	import ProfileItem from '$lib/components/profiles/profile-item.svelte';
+
+	const { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>Post liked by — {PUBLIC_APP_NAME}</title>
+</svelte:head>
+
+<PageContainer>
+	<PageHeader title="Liked by" />
+
+	<PageListing subject="profiles" root={!page.url.searchParams.get('cursor')} cursor={data.likes.cursor}>
+		{#each data.likes.items as profile (profile.did)}
+			<ProfileItem item={profile} />
+		{/each}
+	</PageListing>
+</PageContainer>

src/routes/(app)/[actor=did]/[rkey=tid]/likes/+page.ts

···
+import { simpleFetchHandler, XRPC } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+import type { PageLoad } from './$types';
+
+import { makeAtUri } from '$lib/types/at-uri';
+
+export const load: PageLoad = async ({ url, params, fetch }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	const uri = makeAtUri(params.actor, 'app.bsky.feed.post', params.rkey);
+
+	const { data } = await rpc.get('app.bsky.feed.getLikes', {
+		params: {
+			uri,
+			limit: 50,
+			cursor: url.searchParams.get('cursor') || undefined,
+		},
+	});
+
+	return { likes: { cursor: data.cursor, items: data.likes.map((like) => like.actor) } };
+};

src/routes/(app)/[actor=did]/[rkey=tid]/quotes/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/state';
+	import { PUBLIC_APP_NAME } from '$env/static/public';
+	import type { PageProps } from './$types';
+
+	import PageContainer from '$lib/components/page/page-container.svelte';
+	import PageHeader from '$lib/components/page/page-header.svelte';
+	import PageListing from '$lib/components/page/page-listing.svelte';
+	import PostFeedItem from '$lib/components/timeline/post-feed-item.svelte';
+
+	const { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>Quotes — {PUBLIC_APP_NAME}</title>
+</svelte:head>
+
+<PageContainer>
+	<PageHeader title="Quotes" />
+
+	<PageListing subject="posts" root={!page.url.searchParams.get('cursor')} cursor={data.quotes.cursor}>
+		{#each data.quotes.items as post (post.uri)}
+			<PostFeedItem
+				item={{
+					id: post.uri,
+					post,
+					reply: undefined,
+					reason: undefined,
+					next: false,
+					prev: false,
+				}}
+			/>
+		{/each}
+	</PageListing>
+</PageContainer>

src/routes/(app)/[actor=did]/[rkey=tid]/quotes/+page.ts

···
+import { simpleFetchHandler, XRPC } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+import type { PageLoad } from './$types';
+
+import { makeAtUri } from '$lib/types/at-uri';
+
+export const load: PageLoad = async ({ url, params, fetch }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	const uri = makeAtUri(params.actor, 'app.bsky.feed.post', params.rkey);
+
+	const { data } = await rpc.get('app.bsky.feed.getQuotes', {
+		params: {
+			uri,
+			limit: 50,
+			cursor: url.searchParams.get('cursor') || undefined,
+		},
+	});
+
+	return { quotes: { cursor: data.cursor, items: data.posts } };
+};

src/routes/(app)/[actor=did]/[rkey=tid]/reposts/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/state';
+	import { PUBLIC_APP_NAME } from '$env/static/public';
+	import type { PageProps } from './$types';
+
+	import PageContainer from '$lib/components/page/page-container.svelte';
+	import PageHeader from '$lib/components/page/page-header.svelte';
+	import PageListing from '$lib/components/page/page-listing.svelte';
+	import ProfileItem from '$lib/components/profiles/profile-item.svelte';
+
+	const { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>Post reposted by — {PUBLIC_APP_NAME}</title>
+</svelte:head>
+
+<PageContainer>
+	<PageHeader title="Reposted by" />
+
+	<PageListing subject="profiles" root={!page.url.searchParams.get('cursor')} cursor={data.reposts.cursor}>
+		{#each data.reposts.items as profile (profile.did)}
+			<ProfileItem item={profile} />
+		{/each}
+	</PageListing>
+</PageContainer>

src/routes/(app)/[actor=did]/[rkey=tid]/reposts/+page.ts

···
+import { simpleFetchHandler, XRPC } from '@atcute/client';
+
+import { PUBLIC_APPVIEW_URL } from '$env/static/public';
+import type { PageLoad } from './$types';
+
+import { makeAtUri } from '$lib/types/at-uri';
+
+export const load: PageLoad = async ({ url, params, fetch }) => {
+	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
+
+	const uri = makeAtUri(params.actor, 'app.bsky.feed.post', params.rkey);
+
+	const { data } = await rpc.get('app.bsky.feed.getRepostedBy', {
+		params: {
+			uri,
+			limit: 50,
+			cursor: url.searchParams.get('cursor') || undefined,
+		},
+	});
+
+	return { reposts: { cursor: data.cursor, items: data.repostedBy } };
+};

src/routes/+layout.ts

···
+import { dev } from '$app/environment';
+
+export const csr = dev;

svelte.config.js

···
+import adapter from '@sveltejs/adapter-cloudflare';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+	compilerOptions: {
+		runes: true,
+	},
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter(),
+	},
+};
+
+export default config;

tsconfig.json

···
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

···
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});