add atproto-ui

astro.config.mjs

···
 import db from "@astrojs/db";
 import authproto from "@fujocoded/authproto";
 import unocss from "unocss/astro";
-
 import preact from "@astrojs/preact";
 
 // https://astro.build/config
···
   adapter: node({
     mode: 'standalone',
   }),
-  integrations: [db(), authproto({
-    applicationName: "fan archive",
-    applicationDomain: "localhost:4321",
-    driver: {
-      name: "astro:db",
-    },
-    scopes: {
-      genericData: true,
+  integrations: [
+    db(),
+    authproto({
+      applicationName: "fan archive",
+      applicationDomain: "localhost:4321",
+      driver: {
+        name: "astro:db",
+      },
+      scopes: {
+        genericData: true,
+      },
+    }),
+    unocss(),
+    preact({ compat: true })
+  ],
+  vite: {
+    ssr: {
+      noExternal: ["atproto-ui"],
     },
-  }), unocss(), preact({ compat: true })],
+  },
+  // session: { // could this work for slices oauth?
+  //   driver: process.env.PROD ? "db0" : "memory",
+  //   options: {
+  //     database: db(),
+  //     tableName: "oauth",
+  //   },
+  //   cookie: {
+  //     name: "fics.fan-session",
+  //     secure: process.env.PROD ? true : false,
+  //     sameSite: "lax",
+  //     path: "/",
+  //   }
+  // },
   experimental: {
     fonts: [
       {

package.json

···
   "version": "0.0.1",
   "dependencies": {
     "@astrojs/db": "^0.18.0",
-    "@astrojs/node": "^9.4.4",
+    "@astrojs/node": "^9.4.6",
     "@astrojs/preact": "^4.1.1",
     "@atproto/api": "^0.16.9",
     "@atproto/common-web": "^0.4.3",
···
     "@tiptap/pm": "^3.6.5",
     "@tiptap/starter-kit": "^3.6.5",
     "@yaireo/tagify": "^4.35.4",
-    "astro": "^5.14.1",
+    "astro": "^5.14.4",
+    "atproto-ui": "^0.3.1",
     "nanoid": "^5.1.5",
     "preact": "^10.27.2"
   },

pnpm-lock.yaml

···
         specifier: ^0.18.0
         version: 0.18.0(pg@8.16.3)
       '@astrojs/node':
-        specifier: ^9.4.4
-        version: 9.4.4(astro@5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))
+        specifier: ^9.4.6
+        version: 9.4.6(astro@5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))
       '@astrojs/preact':
         specifier: ^4.1.1
         version: 4.1.1(@babel/core@7.28.4)(@types/node@24.6.0)(jiti@2.6.0)(preact@10.27.2)(sass-embedded@1.93.2)(sass@1.93.2)
···
         version: 1.7.4
       '@fujocoded/authproto':
         specifier: ^0.1.1
-        version: 0.1.1(astro@5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))(pg@8.16.3)
+        version: 0.1.1(astro@5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))(pg@8.16.3)
       '@preact/signals':
         specifier: ^2.3.2
         version: 2.3.2(preact@10.27.2)
···
         specifier: ^4.35.4
         version: 4.35.4(prop-types@15.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       astro:
-        specifier: ^5.14.1
-        version: 5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)
+        specifier: ^5.14.4
+        version: 5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)
+      atproto-ui:
+        specifier: ^0.3.1
+        version: 0.3.1(@atcute/identity@1.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       nanoid:
         specifier: ^5.1.5
         version: 5.1.6
···
   '@astrojs/db@0.18.0':
     resolution: {integrity: sha512-a91Bl2+SEUhxLF/KxGO9yD9YI6BMMvnBRzRvN7v3Vtpd15UnR9bLz5aQa4pkgzlZPTUILysCKyLl0E10Z2tzGg==}
 
-  '@astrojs/internal-helpers@0.7.3':
-    resolution: {integrity: sha512-6Pl0bQEIChuW5wqN7jdKrzWfCscW2rG/Cz+fzt4PhSQX2ivBpnhXgFUCs0M3DCYvjYHnPVG2W36X5rmFjZ62sw==}
+  '@astrojs/internal-helpers@0.7.4':
+    resolution: {integrity: sha512-lDA9MqE8WGi7T/t2BMi+EAXhs4Vcvr94Gqx3q15cFEz8oFZMO4/SFBqYr/UcmNlvW+35alowkVj+w9VhLvs5Cw==}
 
-  '@astrojs/markdown-remark@6.3.7':
-    resolution: {integrity: sha512-KXGdq6/BC18doBCYXp08alHlWChH0hdD2B1qv9wIyOHbvwI5K6I7FhSta8dq1hBQNdun8YkKPR013D/Hm8xd0g==}
+  '@astrojs/markdown-remark@6.3.8':
+    resolution: {integrity: sha512-uFNyFWadnULWK2cOw4n0hLKeu+xaVWeuECdP10cQ3K2fkybtTlhb7J7TcScdjmS8Yps7oje9S/ehYMfZrhrgCg==}
 
-  '@astrojs/node@9.4.4':
-    resolution: {integrity: sha512-zQelZmeejnpw3Y5cj2gCyAZ6HT7tjgsWLZH8k40s3bTaT6lqJXlPtKJeIsuEcod21vZLODqBEQeu0CWrWm01EQ==}
+  '@astrojs/node@9.4.6':
+    resolution: {integrity: sha512-vyl+GaT20CjullFghaO5/g3ygpzfjQdxjRJev8r33Vi831nCe3yyy4G/V1z6wpq4FHDEduMtT2jdXfJVx1th+A==}
     peerDependencies:
-      astro: ^5.7.0
+      astro: ^5.14.3
 
   '@astrojs/preact@4.1.1':
     resolution: {integrity: sha512-UyUHtZ6uZEghqR5K6ri6YdczYTRjXDw3n9xzBXXtsl2xZ8dj2uVN4P6qrLo5nlON5lEkRCGsn4mO4utuyAB/KA==}
···
     resolution: {integrity: sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==}
     engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
 
+  '@atcute/atproto@3.1.7':
+    resolution: {integrity: sha512-3Ym8qaVZg2vf8qw0KO1aue39z/5oik5J+UDoSes1vr8ddw40UVLA5sV4bXSKmLnhzQHiLLgoVZXe4zaKfozPoQ==}
+
+  '@atcute/bluesky@3.2.6':
+    resolution: {integrity: sha512-jUSSTW5Th1vy0bWBazVHuhGQ3Xz4cX648WvLNpYDv7WPzlFzIWm6cnQCbUToQ+uK3K4WyVuuqYtZqqI0f4wWUQ==}
+
+  '@atcute/client@4.0.4':
+    resolution: {integrity: sha512-0vkYe6HcGAef8FS4dlGMqCCPG4I4Lve1R8Amk8UEviUVofiqlv1WGoeez9CJFL8G/7vhcgVV9rPTHLJEjZ4RdQ==}
+
+  '@atcute/identity-resolver@1.1.4':
+    resolution: {integrity: sha512-/SVh8vf2cXFJenmBnGeYF2aY3WGQm3cJeew5NWTlkqoy3LvJ5wkvKq9PWu4Tv653VF40rPOp6LOdVr9Fa+q5rA==}
+    peerDependencies:
+      '@atcute/identity': ^1.0.0
+
+  '@atcute/identity@1.1.1':
+    resolution: {integrity: sha512-zax42n693VEhnC+5tndvO2KLDTMkHOz8UExwmklvJv7R9VujfEwiSWhcv6Jgwb3ellaG8wjiQ1lMOIjLLvwh0Q==}
+
+  '@atcute/lexicons@1.2.2':
+    resolution: {integrity: sha512-bgEhJq5Z70/0TbK5sx+tAkrR8FsCODNiL2gUEvS5PuJfPxmFmRYNWaMGehxSPaXWpU2+Oa9ckceHiYbrItDTkA==}
+
+  '@atcute/tangled@1.0.8':
+    resolution: {integrity: sha512-0E5GjyUa7rBN8qq/Z89ViH2FrInQqJCH/Ymhx4r75DzHHDQtAz9hVAM2J3iUx5Xp3/j9uRkAhYyPNGHmO6R/+A==}
+
+  '@atcute/util-fetch@1.0.3':
+    resolution: {integrity: sha512-f8zzTb/xlKIwv2OQ31DhShPUNCmIIleX6p7qIXwWwEUjX6x8skUtpdISSjnImq01LXpltGV5y8yhV4/Mlb7CRQ==}
+
   '@atproto-labs/did-resolver@0.2.1':
     resolution: {integrity: sha512-zSoHyqwwRYUtMNLW+RrWsImt1U5S47nJv5FfmAXTmon6wVKjxKD/PFrD1pg/4G6THqJmQHTs1Hj+54XVupYnvQ==}
 
···
     resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
     engines: {node: '>=6.9.0'}
 
+  '@badrap/valita@0.4.6':
+    resolution: {integrity: sha512-4kdqcjyxo/8RQ8ayjms47HCWZIF5981oE5nIenbfThKDxWXtEHKipAOWlflpPJzZx9y/JWYQkp18Awr7VuepFg==}
+    engines: {node: '>= 18'}
+
   '@bufbuild/protobuf@2.9.0':
     resolution: {integrity: sha512-rnJenoStJ8nvmt9Gzye8nkYd6V22xUAnu4086ER7h1zJ508vStko4pMvDeQ446ilDTFpV5wnoc5YS7XvMwwMqA==}
 
-  '@capsizecss/unpack@2.4.0':
-    resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==}
+  '@capsizecss/unpack@3.0.0':
+    resolution: {integrity: sha512-+ntATQe1AlL7nTOYjwjj6w3299CgRot48wL761TUGYpYgAou3AaONZazp0PKZyCyWhudWsjhq1nvRHOvbMzhTA==}
+    engines: {node: '>=18'}
 
   '@emnapi/runtime@1.5.0':
     resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
···
     resolution: {integrity: sha512-lRx63oCHxeJ90DqIgmbxH1PQmiBDY1wVaLzB4hK0d/xS5BrG1iZO3HdCJS/DQJk6GJ8xHDev8OMI7iGxvE1ZUA==}
     engines: {node: '>=20'}
 
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
   '@swc/helpers@0.5.17':
     resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
 
···
     peerDependencies:
       astro: ^4.14.0 || ^5.0.0
 
-  astro@5.14.1:
-    resolution: {integrity: sha512-gPa8NY7/lP8j8g81iy8UwANF3+aukKRWS68IlthZQNgykpg80ne6lbHOp6FErYycxQ1TUhgEfkXVDQZAoJx8Bg==}
+  astro@5.14.4:
+    resolution: {integrity: sha512-yqgMAO2Whi9GmZkByyiPcG7CiiPr0Me0iBSorMa6M0g+wQk/ewnIqUyr7T/uFCPTQndoKwucnYFTrf0yfb0urw==}
     engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
     hasBin: true
 
+  atproto-ui@0.3.1:
+    resolution: {integrity: sha512-kEaMrvxJBut1n9kSbVUA5mV8+Gj2/LUSfuKngGTpDuYprh+TAyNnZSmKDs24VBl0+termH4XIIpfOw1qD5z7ng==}
+    peerDependencies:
+      react: ^18.2.0 || ^19.0.0
+      react-dom: ^18.2.0 || ^19.0.0
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   await-lock@2.2.2:
     resolution: {integrity: sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw==}
 
···
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
-
-  blob-to-buffer@1.2.9:
-    resolution: {integrity: sha512-BF033y5fN6OCofD3vgHmNtwZWRcq9NLyyxyILx9hfMy1sXYy4ojFl765hJ2lP0YaN2fuxPaLO2Vzzoxy0FLFFA==}
 
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
···
 
   crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
-
-  cross-fetch@3.2.0:
-    resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==}
 
   crossws@0.3.5:
     resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
···
   escape-string-regexp@5.0.0:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
+
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
 
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
···
   node-fetch-native@1.6.7:
     resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
 
-  node-fetch@2.7.0:
-    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
-
   node-fetch@3.3.2:
     resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
···
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
 
-  tinyexec@0.3.2:
-    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
-
   tinyexec@1.0.1:
     resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
···
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
-
-  tr46@0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
···
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
-  unifont@0.5.2:
-    resolution: {integrity: sha512-LzR4WUqzH9ILFvjLAUU7dK3Lnou/qd5kD+IakBtBK4S15/+x2y9VX+DcWQv6s551R6W+vzwgVS6tFg3XggGBgg==}
+  unifont@0.6.0:
+    resolution: {integrity: sha512-5Fx50fFQMQL5aeHyWnZX9122sSLckcDvcfFiBf3QYeHa7a1MKJooUy52b67moi2MJYkrfo/TWY+CoLdr/w0tTA==}
 
   unist-util-find-after@5.0.0:
     resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
···
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
 
-  webidl-conversions@3.0.1:
-    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-
-  whatwg-url@5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
-
   which-pm-runs@1.1.0:
     resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
     engines: {node: '>=4'}
···
       - sqlite3
       - utf-8-validate
 
-  '@astrojs/internal-helpers@0.7.3': {}
+  '@astrojs/internal-helpers@0.7.4': {}
 
-  '@astrojs/markdown-remark@6.3.7':
+  '@astrojs/markdown-remark@6.3.8':
     dependencies:
-      '@astrojs/internal-helpers': 0.7.3
+      '@astrojs/internal-helpers': 0.7.4
       '@astrojs/prism': 3.3.0
       github-slugger: 2.0.0
       hast-util-from-html: 2.0.3
···
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/node@9.4.4(astro@5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))':
+  '@astrojs/node@9.4.6(astro@5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))':
     dependencies:
-      '@astrojs/internal-helpers': 0.7.3
-      astro: 5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)
+      '@astrojs/internal-helpers': 0.7.4
+      astro: 5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)
       send: 1.2.0
       server-destroy: 1.0.1
     transitivePeerDependencies:
···
       which-pm-runs: 1.1.0
     transitivePeerDependencies:
       - supports-color
+
+  '@atcute/atproto@3.1.7':
+    dependencies:
+      '@atcute/lexicons': 1.2.2
+
+  '@atcute/bluesky@3.2.6':
+    dependencies:
+      '@atcute/atproto': 3.1.7
+      '@atcute/lexicons': 1.2.2
+
+  '@atcute/client@4.0.4':
+    dependencies:
+      '@atcute/identity': 1.1.1
+      '@atcute/lexicons': 1.2.2
+
+  '@atcute/identity-resolver@1.1.4(@atcute/identity@1.1.1)':
+    dependencies:
+      '@atcute/identity': 1.1.1
+      '@atcute/lexicons': 1.2.2
+      '@atcute/util-fetch': 1.0.3
+      '@badrap/valita': 0.4.6
+
+  '@atcute/identity@1.1.1':
+    dependencies:
+      '@atcute/lexicons': 1.2.2
+      '@badrap/valita': 0.4.6
+
+  '@atcute/lexicons@1.2.2':
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      esm-env: 1.2.2
+
+  '@atcute/tangled@1.0.8':
+    dependencies:
+      '@atcute/atproto': 3.1.7
+      '@atcute/lexicons': 1.2.2
+
+  '@atcute/util-fetch@1.0.3':
+    dependencies:
+      '@badrap/valita': 0.4.6
 
   '@atproto-labs/did-resolver@0.2.1':
     dependencies:
···
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
+  '@badrap/valita@0.4.6': {}
+
   '@bufbuild/protobuf@2.9.0':
     optional: true
 
-  '@capsizecss/unpack@2.4.0':
+  '@capsizecss/unpack@3.0.0':
     dependencies:
-      blob-to-buffer: 1.2.9
-      cross-fetch: 3.2.0
       fontkit: 2.0.4
-    transitivePeerDependencies:
-      - encoding
 
   '@emnapi/runtime@1.5.0':
     dependencies:
···
 
   '@floating-ui/utils@0.2.10': {}
 
-  '@fujocoded/authproto@0.1.1(astro@5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))(pg@8.16.3)':
+  '@fujocoded/authproto@0.1.1(astro@5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))(pg@8.16.3)':
     dependencies:
       '@astrojs/db': 0.17.2(pg@8.16.3)
       '@atproto/identity': 0.4.9
       '@atproto/oauth-client-node': 0.3.8
-      astro: 5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)
-      astro-integration-kit: 0.19.0(astro@5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))
+      astro: 5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)
+      astro-integration-kit: 0.19.0(astro@5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2))
       unstorage: 1.17.1
     transitivePeerDependencies:
       - '@aws-sdk/client-rds-data'
···
 
   '@sindresorhus/transliterate@2.0.0': {}
 
+  '@standard-schema/spec@1.0.0': {}
+
   '@swc/helpers@0.5.17':
     dependencies:
       tslib: 2.8.1
···
 
   array-iterate@2.0.1: {}
 
-  astro-integration-kit@0.19.0(astro@5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)):
+  astro-integration-kit@0.19.0(astro@5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)):
     dependencies:
-      astro: 5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)
+      astro: 5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2)
       pathe: 1.1.2
 
-  astro@5.14.1(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2):
+  astro@5.14.4(@types/node@24.6.0)(jiti@2.6.0)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(typescript@5.9.2):
     dependencies:
       '@astrojs/compiler': 2.13.0
-      '@astrojs/internal-helpers': 0.7.3
-      '@astrojs/markdown-remark': 6.3.7
+      '@astrojs/internal-helpers': 0.7.4
+      '@astrojs/markdown-remark': 6.3.8
       '@astrojs/telemetry': 3.3.0
-      '@capsizecss/unpack': 2.4.0
+      '@capsizecss/unpack': 3.0.0
       '@oslojs/encoding': 1.1.0
       '@rollup/pluginutils': 5.3.0(rollup@4.52.3)
       acorn: 8.15.0
···
       semver: 7.7.2
       shiki: 3.13.0
       smol-toml: 1.4.2
-      tinyexec: 0.3.2
+      tinyexec: 1.0.1
       tinyglobby: 0.2.15
       tsconfck: 3.1.6(typescript@5.9.2)
       ultrahtml: 1.6.0
-      unifont: 0.5.2
+      unifont: 0.6.0
       unist-util-visit: 5.0.0
       unstorage: 1.17.1
       vfile: 6.0.3
···
       - '@vercel/kv'
       - aws4fetch
       - db0
-      - encoding
       - idb-keyval
       - ioredis
       - jiti
···
       - uploadthing
       - yaml
 
+  atproto-ui@0.3.1(@atcute/identity@1.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@atcute/atproto': 3.1.7
+      '@atcute/bluesky': 3.2.6
+      '@atcute/client': 4.0.4
+      '@atcute/identity-resolver': 1.1.4(@atcute/identity@1.1.1)
+      '@atcute/tangled': 1.0.8
+      react: 19.2.0
+    optionalDependencies:
+      react-dom: 19.2.0(react@19.2.0)
+    transitivePeerDependencies:
+      - '@atcute/identity'
+
   await-lock@2.2.2: {}
 
   axobject-query@4.1.0: {}
···
   baseline-browser-mapping@2.8.12: {}
 
   binary-extensions@2.3.0: {}
-
-  blob-to-buffer@1.2.9: {}
 
   boolbase@1.0.0: {}
 
···
   cookie@1.0.2: {}
 
   crelt@1.0.6: {}
-
-  cross-fetch@3.2.0:
-    dependencies:
-      node-fetch: 2.7.0
-    transitivePeerDependencies:
-      - encoding
 
   crossws@0.3.5:
     dependencies:
···
   escape-string-regexp@4.0.0: {}
 
   escape-string-regexp@5.0.0: {}
+
+  esm-env@1.2.2: {}
 
   estree-walker@2.0.2: {}
 
···
 
   node-fetch-native@1.6.7: {}
 
-  node-fetch@2.7.0:
-    dependencies:
-      whatwg-url: 5.0.0
-
   node-fetch@3.3.2:
     dependencies:
       data-uri-to-buffer: 4.0.1
···
 
   tiny-inflate@1.0.3: {}
 
-  tinyexec@0.3.2: {}
-
   tinyexec@1.0.1: {}
 
   tinyglobby@0.2.15:
···
   toidentifier@1.0.1: {}
 
   totalist@3.0.1: {}
-
-  tr46@0.0.3: {}
 
   trim-lines@3.0.1: {}
 
···
       trough: 2.2.0
       vfile: 6.0.3
 
-  unifont@0.5.2:
+  unifont@0.6.0:
     dependencies:
       css-tree: 3.1.0
       ofetch: 1.4.1
···
   web-namespaces@2.0.1: {}
 
   web-streams-polyfill@3.3.3: {}
-
-  webidl-conversions@3.0.1: {}
-
-  whatwg-url@5.0.0:
-    dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
 
   which-pm-runs@1.1.0: {}
 

src/components/chapters/Bsky.tsx

···
+/** @jsxImportSource react */
+import { AtProtoProvider, BlueskyPost, formatDidForLabel, parseAtUri, toBlueskyPostUrl, useDidResolution, type BlueskyPostRendererProps, type FeedPostRecord, type ParsedAtUri } from "atproto-ui";
+import { createAutoEmbed } from "./utils/BskyEmbed";
+import { createFacetedSegments } from "./utils/Facet";
+
+type props = {
+  did: string;
+  rkey: string;
+  embed?: boolean;
+}
+
+export function Bsky({ did, rkey, embed = false }: props) {
+  // You can embed Bluesky posts inside other documents,
+  // and there's no need to wrap it in another <AtProtoProvider> unless it's standalone
+  return embed ? (
+    <BlueskyPost
+      did={did}
+      rkey={rkey}
+      // renderer={bskyRenderer}
+    />
+  ) : (
+    <AtProtoProvider>
+      <BlueskyPost
+        did={did}
+        rkey={rkey}
+        // renderer={bskyRenderer}
+      />
+    </AtProtoProvider>
+  )
+}
+
+function bskyRenderer({ record, error, loading, embed, authorDid, atUri }: BlueskyPostRendererProps) {
+  const replyParentUri = record.reply?.parent?.uri;
+  const replyTarget = replyParentUri ? parseAtUri(replyParentUri) : undefined;
+  const { handle: parentHandle, loading: parentHandleLoading } = useDidResolution(replyTarget?.did);
+
+  if (error) return <div style={{ padding: 8, color: 'crimson' }}>Failed to load post.</div>;
+  if (loading && !record) return <div style={{ padding: 8 }}>Loading…</div>;
+
+  const createdDate = new Date(record.createdAt);
+  const created = createdDate.toLocaleString(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short'
+  });
+  const replyHref = replyTarget ? toBlueskyPostUrl(replyTarget) : undefined;
+  const replyLabel = replyTarget ? formatReplyLabel(replyTarget, parentHandle, parentHandleLoading) : undefined;
+
+  const resolvedEmbed = embed ?? createAutoEmbed(record, authorDid);
+  const parsedSelf = atUri ? parseAtUri(atUri) : undefined;
+  const postUrl = parsedSelf ? toBlueskyPostUrl(parsedSelf) : undefined;
+
+  return (
+    <article className="bsky" aria-busy={loading}>
+      {replyHref && replyLabel && (
+        <div>
+          Replying to{' '}
+          <a href={replyHref} target="_blank" rel="noopener noreferrer">
+            {replyLabel}
+          </a>
+        </div>
+      )}
+      {postUrl && (
+        <span>
+          <a href={postUrl} target="_blank" rel="noopener noreferrer">
+            View on Bluesky
+          </a>
+        </span>
+      )}
+      {record.text.split(/\n/g).map(text => <p>{text}</p>)}
+      {record.facets && record.facets.length > 0 && (
+        <>{createFacetedSegments(record.text, record.facets)}</>
+      )}
+      {resolvedEmbed && <>{resolvedEmbed}</>}
+    </article>
+  )
+}
+
+function formatReplyLabel(target: ParsedAtUri, resolvedHandle?: string, loading?: boolean): string {
+  if (resolvedHandle) return `@${resolvedHandle}`;
+  if (loading) return '…';
+  return `@${formatDidForLabel(target.did)}`;
+}

src/components/chapters/Chapter.astro

···
 ---
 <section>
   <header>
-    <h2>{chapter.title}</h2>
-    {chapter.notes && (
+    <h1>{chapter.title}</h1>
+    {chapter.authorsNotes && (
       <details>
         <summary>Author's Notes</summary>
-        <Fragment set:html={chapter.notes} />
+        <Fragment set:html={chapter.authorsNotes} />
       </details>
     )}
     <time datetime={chapter.createdAt.toISOString()}>
···
   <div class="prose lg:prose-xl">
     <Fragment set:html={chapter.content} />
   </div>
+
+  <footer>
+    {chapter.endNotes && (
+      <aside>
+        <p>End notes</p>
+        <Fragment set:html={chapter.endNotes} />
+      </aside>
+    )}
+  </footer>
 </section>

src/components/chapters/Leaflet.astro

···
----
-import { ComAtprotoRepoStrongRef } from "@atproto/api";
-
-
----

src/components/chapters/Leaflet.tsx

···
+/** @jsxImportSource react */
+import { AtProtoProvider, LeafletDocument } from "atproto-ui";
+
+type props = {
+  did: string;
+  rkey: string;
+}
+
+export function Leaflet({ did, rkey }: props) {
+  return (
+    <AtProtoProvider>
+      <LeafletDocument
+        did={did}
+        rkey={rkey} 
+        // renderer={({ record }) => (
+        //   <article>
+        //     {record.pages.map(page => (
+        //       <>
+        //         <pre>{JSON.stringify(page, null, 2)}</pre>
+        //         {page.blocks?.map(({ block }) => (
+        //           <p>{block.$type}</p>
+        //         ))}
+        //       </>
+        //     ))}
+        //   </article>
+        // )}
+      />
+    </AtProtoProvider>
+  )
+}

src/components/chapters/utils/BskyEmbed.tsx

···
+import { useBlob, type FeedPostRecord } from "atproto-ui";
+
+export function createAutoEmbed(record: FeedPostRecord, authorDid: string | undefined) {
+  const embed = record.embed as { $type?: string } | undefined;
+  if (!embed) return null;
+  if (embed.$type === 'app.bsky.embed.external') {
+    return <ExternalEmbed embed={embed as ExternalEmbedType} did={authorDid} />;
+  }
+  if (embed.$type === 'app.bsky.embed.images') {
+    return <ImagesEmbed embed={embed as ImagesEmbedType} did={authorDid} />;
+  }
+  if (embed.$type === 'app.bsky.embed.recordWithMedia') {
+    const media = (embed as RecordWithMediaEmbed).media;
+    if (media?.$type === 'app.bsky.embed.images') {
+      return <ImagesEmbed embed={media as ImagesEmbedType} did={authorDid} />;
+    }
+  }
+  return null;
+}
+
+type ImagesEmbedType = {
+  $type: 'app.bsky.embed.images';
+  images: Array<{
+    alt?: string;
+    mime?: string;
+    size?: number;
+    image?: {
+      $type?: string;
+      ref?: { $link?: string };
+      cid?: string;
+    };
+    aspectRatio?: {
+      width: number;
+      height: number;
+    };
+  }>;
+};
+
+type RecordWithMediaEmbed = {
+  $type: 'app.bsky.embed.recordWithMedia';
+  record?: unknown;
+  media?: { $type?: string };
+};
+
+interface ImagesEmbedProps {
+  embed: ImagesEmbedType;
+  did?: string;
+}
+
+function ImagesEmbed({ embed, did }: ImagesEmbedProps) {
+  if (!embed.images || embed.images.length === 0) return null;
+  const columns = embed.images.length > 1 ? 'repeat(auto-fit, minmax(160px, 1fr))' : '1fr';
+  return (
+    <div style={{ gridTemplateColumns: columns }}>
+      {embed.images.map((image, idx) => (
+        <PostImage key={idx} image={image} did={did} />
+      ))}
+    </div>
+  );
+};
+
+interface PostImageProps {
+  image: ImagesEmbedType['images'][number];
+  did?: string;
+}
+
+function PostImage({ image, did }: PostImageProps) {
+  const cid = image.image?.ref?.$link ?? image.image?.cid;
+  const { url, loading, error } = useBlob(did, cid);
+  const alt = image.alt?.trim() || 'Bluesky attachment';
+  const aspect = image.aspectRatio && image.aspectRatio.height > 0
+    ? `${image.aspectRatio.width} / ${image.aspectRatio.height}`
+    : undefined;
+
+  return (
+    <figure aria-busy={loading}>
+      <div style={{ aspectRatio: aspect }}>
+        {url ? (
+          <img src={url} alt={alt} />
+        ) : (
+          <div>
+            {loading ? 'Loading image…' : error ? 'Image failed to load' : 'Image unavailable'}
+          </div>
+        )}
+      </div>
+      {image.alt && image.alt.trim().length > 0 && (
+        <figcaption>{image.alt}</figcaption>
+      )}
+    </figure>
+  );
+};
+
+type ExternalEmbedType = {
+  $type: "app.bsky.embed.external";
+  external: {
+    description?: string;
+    thumb?: {
+      $type?: string;
+      mimeType?: string;
+      ref?: { $link?: string; };
+      size?: number;
+    };
+    title?: string;
+    uri?: string;
+  };
+}
+
+interface ExternalEmbedProps {
+  embed: ExternalEmbedType;
+  did?: string;
+}
+
+function ExternalEmbed({ embed, did }: ExternalEmbedProps) {
+  const cid = embed.external.thumb?.ref?.$link;
+  const image = useBlob(did, cid);
+  const { url, loading, error } = image;
+  
+  return (
+    <figure aria-busy={loading}>
+      <div className="max-w-full">
+        <a href={embed.external.uri} target="_blank" rel="noopener noreferrer">
+          <span aria-hidden="true">{embed.external.title}</span>
+        </a>
+        {url ? (
+          <img src={url} alt={embed.external.description} />
+        ) : (
+          <div className={error ? "text-error" : "text-neutral"}>
+            {loading ? 'Loading image…' : error ? 'Image failed to load' : 'Image unavailable'}
+          </div>
+        )}
+      </div>
+      {embed.external.description && embed.external.description.trim().length > 0 && (
+        <figcaption className="font-style-italic">{embed.external.description}</figcaption>
+      )}
+    </figure>
+  );
+}

src/components/chapters/utils/Facet.tsx

···
+import type { LeafletRichTextFacet, LeafletRichTextFeature } from "atproto-ui";
+import React from "preact/compat";
+
+interface BskyPostTextFacet {
+  $type?: "app.bsky.richtext.facet";
+  features?: BskyPostFeature[];
+  index: {
+    byteEnd: number;
+    byteStart: number;
+    $type?: "app.bsky.richtext.facet#byteSlice";
+  };
+}
+
+type BskyPostFeature = BskyPostLinkFeature | BskyPostTagFeature | BskyPostMentionFeature;
+
+type BskyPostTagFeature = {
+  $type: "app.bsky.richtext.facet#tag";
+  tag?: string;
+};
+
+type BskyPostLinkFeature = {
+  $type: "app.bsky.richtext.facet#link";
+  uri?: string;
+}
+
+type BskyPostMentionFeature = {
+  $type: "app.bsky.richtext.facet#mention";
+  did?: string;
+}
+
+type Features = LeafletRichTextFeature | BskyPostFeature;
+
+interface Segment {
+  text: string;
+  features: Features[];
+}
+
+export function createFacetedSegments(plaintext: string, facets?: LeafletRichTextFacet[] | BskyPostTextFacet[]): Segment[] {
+  if (!facets?.length) {
+    return [{ text: plaintext, features: [] }];
+  }
+  
+  const prefix = buildBytePrefix(plaintext);
+  const startEvents = new Map<number, Features[]>();
+  const endEvents = new Map<number, Features[]>();
+  const boundaries = new Set<number>([0, prefix.length - 1]);
+  for (const facet of facets) {
+    const { byteStart, byteEnd } = facet.index ?? {};
+    if (typeof byteStart !== 'number' || typeof byteEnd !== 'number' || byteStart >= byteEnd) continue;
+    const start = byteOffsetToCharIndex(prefix, byteStart);
+    const end = byteOffsetToCharIndex(prefix, byteEnd);
+    if (start >= end) continue;
+    boundaries.add(start);
+    boundaries.add(end);
+    if (facet.features?.length) {
+      startEvents.set(start, [...(startEvents.get(start) ?? []), ...facet.features]);
+      endEvents.set(end, [...(endEvents.get(end) ?? []), ...facet.features]);
+    }
+  }
+  const sortedBounds = [...boundaries].sort((a, b) => a - b);
+  const segments: Segment[] = [];
+  let active: Features[] = [];
+  for (let i = 0; i < sortedBounds.length - 1; i++) {
+    const boundary = sortedBounds[i];
+    const next = sortedBounds[i + 1];
+    const endFeatures = endEvents.get(boundary);
+    if (endFeatures?.length) {
+      active = active.filter((feature) => !endFeatures.includes(feature));
+    }
+    const startFeatures = startEvents.get(boundary);
+    if (startFeatures?.length) {
+      active = [...active, ...startFeatures];
+    }
+    if (boundary === next) continue;
+    const text = sliceByCharRange(plaintext, boundary, next);
+    segments.push({ text, features: active.slice() });
+  }
+  return segments;
+}
+
+function buildBytePrefix(text: string): number[] {
+  const encoder = new TextEncoder();
+  const prefix: number[] = [0];
+  let byteCount = 0;
+  for (let i = 0; i < text.length;) {
+    const codePoint = text.codePointAt(i)!;
+    const char = String.fromCodePoint(codePoint);
+    const encoded = encoder.encode(char);
+    byteCount += encoded.length;
+    prefix.push(byteCount);
+    i += codePoint > 0xffff ? 2 : 1;
+  }
+  return prefix;
+}
+
+function byteOffsetToCharIndex(prefix: number[], byteOffset: number): number {
+  for (let i = 0; i < prefix.length; i++) {
+    if (prefix[i] === byteOffset) return i;
+    if (prefix[i] > byteOffset) return Math.max(0, i - 1);
+  }
+  return prefix.length - 1;
+}
+
+function sliceByCharRange(text: string, start: number, end: number): string {
+  if (start <= 0 && end >= text.length) return text;
+  let result = '';
+  let charIndex = 0;
+  for (let i = 0; i < text.length && charIndex < end;) {
+    const codePoint = text.codePointAt(i)!;
+    const char = String.fromCodePoint(codePoint);
+    if (charIndex >= start && charIndex < end) result += char;
+    i += codePoint > 0xffff ? 2 : 1;
+    charIndex++;
+  }
+  return result;
+}
+
+export function renderSegment(segment: Segment): React.ReactNode {
+  const parts = segment.text.split('\n');
+  return parts.flatMap((part, idx) => {
+    const key = `${segment.text}-${idx}-${part.length}`;
+    const wrapped = applyFeatures(part.length ? part : '\u00a0', segment.features, key);
+    if (idx === parts.length - 1) return wrapped;
+    return [wrapped, <br key={`${key}-br`} />];
+  });
+}
+
+export function applyFeatures(content: React.ReactNode, features: Features[], key: string): React.ReactNode {
+  if (!features?.length) return <React.Fragment key={key}>{content}</React.Fragment>;
+  return (
+    <React.Fragment key={key}>
+      {features.reduce<React.ReactNode>((child, feature, idx) => wrapFeature(child, feature, `${key}-feature-${idx}`), content)}
+    </React.Fragment>
+  );
+}
+
+export function wrapFeature(child: React.ReactNode, feature: Features, key: string): React.ReactNode {
+  switch (feature.$type) {
+    case 'app.bsky.richtext.facet#link':
+    case 'pub.leaflet.richtext.facet#link':
+      return <a key={key} href={feature.uri} target="_blank" rel="noopener noreferrer">{child}</a>;
+    case 'pub.leaflet.richtext.facet#code':
+      return <code key={key}>{child}</code>;
+    case 'pub.leaflet.richtext.facet#highlight':
+      return <mark key={key}>{child}</mark>;
+    case 'pub.leaflet.richtext.facet#underline':
+      return <span key={key} style={{ textDecoration: 'underline' }}>{child}</span>;
+    case 'pub.leaflet.richtext.facet#strikethrough':
+      return <span key={key} style={{ textDecoration: 'line-through' }}>{child}</span>;
+    case 'pub.leaflet.richtext.facet#bold':
+      return <strong key={key}>{child}</strong>;
+    case 'pub.leaflet.richtext.facet#italic':
+      return <em key={key}>{child}</em>;
+    case 'pub.leaflet.richtext.facet#id':
+      return <span key={key} id={feature.id}>{child}</span>;
+    case "app.bsky.richtext.facet#mention":
+      return <a key={key} href={`https://bsky.app/profile/${feature.did}`} target="_blank" rel="noopener noreferrer">@{child}</a>
+    case "app.bsky.richtext.facet#tag":
+      return <a key={key} href={`https://bsky.app/hashtag/${feature.tag}`} target="_blank" rel="noopener noreferrer">{feature.tag}</a>
+    default:
+      return <span key={key}>{child}</span>;
+  }
+}

src/components/chapters/utils/LeafletBlocks.tsx

···
+import { BlueskyPost, formatDidForLabel, parseAtUri, useBlob, useDidResolution, type LeafletAlignmentValue, type LeafletBlock, type LeafletBlockquoteBlock, type LeafletBskyPostBlock, type LeafletCodeBlock, type LeafletHeaderBlock, type LeafletIFrameBlock, type LeafletImageBlock, type LeafletLinearDocumentBlock, type LeafletLinearDocumentPage, type LeafletListItem, type LeafletMathBlock, type LeafletRichTextFacet, type LeafletRichTextFeature, type LeafletTextBlock, type LeafletUnorderedListBlock, type LeafletWebsiteBlock } from "atproto-ui";
+import React from "preact/compat";
+import { useMemo, useRef } from "preact/hooks";
+import { createFacetedSegments, renderSegment } from "./Facet";
+
+export const LeafletRenderer: React.FC<{ page: LeafletLinearDocumentPage; documentDid: string; }> = ({ page, documentDid }) => {
+  if (!page.blocks?.length) return null;
+  return (
+    <div>
+      {page.blocks.map((blockWrapper, idx) => (
+        <LeafletBlockRenderer
+          key={`block-${idx}`}
+          wrapper={blockWrapper}
+          documentDid={documentDid}
+          isFirst={idx === 0}
+        />
+      ))}
+    </div>
+  );
+};
+
+interface LeafletBlockRendererProps {
+  wrapper: LeafletLinearDocumentBlock;
+  documentDid: string;
+  isFirst?: boolean;
+}
+
+const LeafletBlockRenderer: React.FC<LeafletBlockRendererProps> = ({ wrapper, documentDid, isFirst }) => {
+  const block = wrapper.block;
+  if (!block || !('$type' in block) || !block.$type) {
+    return null;
+  }
+  const alignment = alignmentValue(wrapper.alignment);
+
+  switch (block.$type) {
+    case 'pub.leaflet.blocks.header':
+      return <LeafletHeaderBlockView block={block} alignment={alignment} isFirst={isFirst} />;
+    case 'pub.leaflet.blocks.blockquote':
+      return <LeafletBlockquoteBlockView block={block} alignment={alignment} isFirst={isFirst} />;
+    case 'pub.leaflet.blocks.image':
+      return <LeafletImageBlockView block={block} alignment={alignment} documentDid={documentDid} />;
+    case 'pub.leaflet.blocks.unorderedList':
+      return <LeafletListBlockView block={block} alignment={alignment} documentDid={documentDid} />;
+    case 'pub.leaflet.blocks.website':
+      return <LeafletWebsiteBlockView block={block} alignment={alignment} documentDid={documentDid} />;
+    case 'pub.leaflet.blocks.iframe':
+      return <LeafletIframeBlockView block={block} alignment={alignment} />;
+    case 'pub.leaflet.blocks.math':
+      return <LeafletMathBlockView block={block} alignment={alignment} />;
+    case 'pub.leaflet.blocks.code':
+      return <LeafletCodeBlockView block={block} alignment={alignment} />;
+    case 'pub.leaflet.blocks.horizontalRule':
+      return <LeafletHorizontalRuleBlockView alignment={alignment} />;
+    case 'pub.leaflet.blocks.bskyPost':
+      return <LeafletBskyPostBlockView block={block} />;
+    case 'pub.leaflet.blocks.text':
+    default:
+      return <LeafletTextBlockView block={block as LeafletTextBlock} alignment={alignment} isFirst={isFirst} />;
+  }
+};
+
+const LeafletTextBlockView: React.FC<{ block: LeafletTextBlock; alignment?: React.CSSProperties['textAlign']; isFirst?: boolean }> = ({ block, alignment, isFirst }) => {
+  const segments = useMemo(() => createFacetedSegments(block.plaintext, block.facets), [block.plaintext, block.facets]);
+  const textContent = block.plaintext ?? '';
+  if (!textContent.trim() && segments.length === 0) {
+    return null;
+  }
+  const style: React.CSSProperties = {
+    ...(alignment ? { textAlign: alignment } : undefined),
+    ...(isFirst ? { marginTop: 0 } : undefined)
+  };
+  return (
+    <p style={style}>
+      {segments.map((segment, idx) => (
+        <React.Fragment key={`text-${idx}`}>
+          {renderSegment(segment)}
+        </React.Fragment>
+      ))}
+    </p>
+  );
+};
+
+const LeafletHeaderBlockView: React.FC<{ block: LeafletHeaderBlock; alignment?: React.CSSProperties['textAlign']; isFirst?: boolean }> = ({ block, alignment, isFirst }) => {
+  const level = block.level && block.level >= 1 && block.level <= 6 ? block.level : 2;
+  const segments = useMemo(() => createFacetedSegments(block.plaintext, block.facets), [block.plaintext, block.facets]);
+  const normalizedLevel = Math.min(Math.max(level, 1), 6) as 1 | 2 | 3 | 4 | 5 | 6;
+  const headingTag = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const)[normalizedLevel - 1];
+  const style: React.CSSProperties = {
+    ...(alignment ? { textAlign: alignment } : undefined),
+    ...(isFirst ? { marginTop: 0 } : undefined)
+  };
+  return React.createElement(
+    headingTag,
+    { style },
+    segments.map((segment, idx) => (
+      <React.Fragment key={`header-${idx}`}>
+        {renderSegment(segment)}
+      </React.Fragment>
+    ))
+  );
+};
+
+const LeafletBlockquoteBlockView: React.FC<{ block: LeafletBlockquoteBlock; alignment?: React.CSSProperties['textAlign']; isFirst?: boolean }> = ({ block, alignment, isFirst }) => {
+  const segments = useMemo(() => createFacetedSegments(block.plaintext, block.facets), [block.plaintext, block.facets]);
+  const textContent = block.plaintext ?? '';
+  if (!textContent.trim() && segments.length === 0) {
+    return null;
+  }
+  return (
+    <blockquote style={{ ...(alignment ? { textAlign: alignment } : undefined), ...(isFirst ? { marginTop: 0 } : undefined) }}>
+      {segments.map((segment, idx) => (
+        <React.Fragment key={`quote-${idx}`}>
+          {renderSegment(segment)}
+        </React.Fragment>
+      ))}
+    </blockquote>
+  );
+};
+
+const LeafletImageBlockView: React.FC<{ block: LeafletImageBlock; alignment?: React.CSSProperties['textAlign']; documentDid: string; }> = ({ block, alignment, documentDid }) => {
+  const cid = block.image?.ref?.$link ?? block.image?.cid;
+  const { url, loading, error } = useBlob(documentDid, cid);
+  const aspectRatio = block.aspectRatio?.height && block.aspectRatio?.width
+    ? `${block.aspectRatio.width} / ${block.aspectRatio.height}`
+    : undefined;
+  
+  return (
+    <figure style={{ ...(alignment ? { textAlign: alignment } : undefined) }}>
+      <div style={{ ...(aspectRatio ? { aspectRatio } : {}) }}>
+        {url && !error ? (
+          <img src={url} alt={block.alt ?? ''} />
+        ) : (
+          <div>
+            {loading ? 'Loading image…' : error ? 'Image unavailable' : 'No image'}
+          </div>
+        )}
+      </div>
+      {block.alt && block.alt.trim().length > 0 && (
+        <figcaption>{block.alt}</figcaption>
+      )}
+    </figure>
+  );
+};
+
+const LeafletListBlockView: React.FC<{ block: LeafletUnorderedListBlock; alignment?: React.CSSProperties['textAlign']; documentDid: string; }> = ({ block, alignment, documentDid }) => {
+  return (
+    <ul style={{ ...(alignment ? { textAlign: alignment } : undefined) }}>
+      {block.children?.map((child, idx) => (
+        <LeafletListItemRenderer
+          key={`list-item-${idx}`}
+          item={child}
+          documentDid={documentDid}
+          alignment={alignment}
+        />
+      ))}
+    </ul>
+  );
+};
+
+const LeafletListItemRenderer: React.FC<{ item: LeafletListItem; documentDid: string; alignment?: React.CSSProperties['textAlign'] }> = ({ item, documentDid, alignment }) => {
+  return (
+    <li style={{ ...(alignment ? { textAlign: alignment } : undefined) }}>
+      <div>
+        <LeafletInlineBlock block={item.content} documentDid={documentDid} alignment={alignment} />
+      </div>
+      {item.children && item.children.length > 0 && (
+        <ul style={{ ...(alignment ? { textAlign: alignment } : undefined) }}>
+          {item.children.map((child, idx) => (
+            <LeafletListItemRenderer key={`nested-${idx}`} item={child} documentDid={documentDid} alignment={alignment} />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+const LeafletInlineBlock: React.FC<{ block: LeafletBlock; documentDid: string; alignment?: React.CSSProperties['textAlign'] }> = ({ block, documentDid, alignment }) => {
+  switch (block.$type) {
+    case 'pub.leaflet.blocks.header':
+      return <LeafletHeaderBlockView block={block as LeafletHeaderBlock} alignment={alignment} />;
+    case 'pub.leaflet.blocks.blockquote':
+      return <LeafletBlockquoteBlockView block={block as LeafletBlockquoteBlock} alignment={alignment} />;
+    case 'pub.leaflet.blocks.image':
+      return <LeafletImageBlockView block={block as LeafletImageBlock} documentDid={documentDid} alignment={alignment} />;
+    default:
+      return <LeafletTextBlockView block={block as LeafletTextBlock} alignment={alignment} />;
+  }
+};
+
+const LeafletWebsiteBlockView: React.FC<{ block: LeafletWebsiteBlock; alignment?: React.CSSProperties['textAlign']; documentDid: string }> = ({ block, alignment, documentDid }) => {
+  const previewCid = block.previewImage?.ref?.$link ?? block.previewImage?.cid;
+  const { url, loading, error } = useBlob(documentDid, previewCid);
+
+  return (
+    <a href={block.src} target="_blank" rel="noopener noreferrer" style={{ ...(alignment ? { textAlign: alignment } : undefined) }}>
+      {url && !error ? (
+        <img src={url} alt={block.title ?? 'Website preview'} />
+      ) : (
+        <div>
+          {loading ? 'Loading preview…' : 'Open link'}
+        </div>
+      )}
+      <div>
+        {block.title && <strong>{block.title}</strong>}
+        {block.description && <p>{block.description}</p>}
+        <span>{block.src}</span>
+      </div>
+    </a>
+  );
+};
+
+const LeafletIframeBlockView: React.FC<{ block: LeafletIFrameBlock; alignment?: React.CSSProperties['textAlign'] }> = ({ block, alignment }) => {
+  return (
+    <div style={{ ...(alignment ? { textAlign: alignment } : undefined) }}>
+      <iframe
+        src={block.url}
+        title={block.url}
+        style={{ ...(block.height ? { height: Math.min(Math.max(block.height, 120), 800) } : {}) }}
+        loading="lazy"
+        allowFullScreen
+      />
+    </div>
+  );
+};
+
+const LeafletMathBlockView: React.FC<{ block: LeafletMathBlock; alignment?: React.CSSProperties['textAlign'] }> = ({ block, alignment }) => {
+  return (
+    <pre style={{ ...(alignment ? { textAlign: alignment }: undefined) }}>{block.tex}</pre>
+  );
+};
+
+const LeafletCodeBlockView: React.FC<{ block: LeafletCodeBlock; alignment?: React.CSSProperties['textAlign']; }> = ({ block, alignment }) => {
+  const codeRef = useRef<HTMLElement | null>(null);
+  const langClass = block.language ? `language-${block.language.toLowerCase()}` : undefined;
+  return (
+    <pre style={{ ...(alignment ? { textAlign: alignment } : undefined) }}>
+      <code ref={codeRef} className={langClass}>{block.plaintext}</code>
+    </pre>
+  );
+};
+
+const LeafletHorizontalRuleBlockView: React.FC<{ alignment?: React.CSSProperties['textAlign']; }> = ({ alignment }) => {
+  return <hr style={{ marginLeft: alignment ? 'auto' : undefined, marginRight: alignment ? 'auto' : undefined }} />;
+};
+
+const LeafletBskyPostBlockView: React.FC<{ block: LeafletBskyPostBlock }> = ({ block }) => {
+  const parsed = parseAtUri(block.postRef?.uri);
+  if (!parsed) {
+    return <div>Referenced post unavailable.</div>;
+  }
+  return <BlueskyPost did={parsed.did} rkey={parsed.rkey} iconPlacement="linkInline" />;
+};
+
+function alignmentValue(value?: LeafletAlignmentValue): React.CSSProperties['textAlign'] | undefined {
+  if (!value) return undefined;
+  let normalized = value.startsWith('#') ? value.slice(1) : value;
+  if (normalized.includes('#')) {
+    normalized = normalized.split('#').pop() ?? normalized;
+  }
+  if (normalized.startsWith('lex:')) {
+    normalized = normalized.split(':').pop() ?? normalized;
+  }
+  switch (normalized) {
+    case 'textAlignLeft':
+      return 'left';
+    case 'textAlignCenter':
+      return 'center';
+    case 'textAlignRight':
+      return 'right';
+    case 'textAlignJustify':
+      return 'justify';
+    default:
+      return undefined;
+  }
+}
+
+function useAuthorLabel(author: string | undefined, authorDid: string | undefined): string | undefined {
+  const { handle } = useDidResolution(authorDid);
+  if (!author) return undefined;
+  if (handle) return `@${handle}`;
+  if (authorDid) return formatDidForLabel(authorDid);
+  return author;
+}
+