Clarify what this is

This reverts commit 5ed88bd43e.

package.json

@@ -165,11 +165,13 @@
     "react-avatar-editor": "^13.0.0",
     "react-compiler-runtime": "file:./lib/react-compiler-runtime",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-keyed-flatten-children": "^3.0.0",
     "react-native": "0.74.1",
     "react-native-compressor": "^1.8.24",
     "react-native-date-picker": "^4.4.2",
     "react-native-drawer-layout": "^4.0.0-alpha.3",
+    "react-native-fetch-api": "^3.0.0",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-get-random-values": "~1.11.0",
@@ -193,6 +195,7 @@
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.10.2",
     "react-responsive": "^9.0.2",
+    "react-server-dom-webpack": "19.0.0-canary-adb717393-20240411",
     "react-textarea-autosize": "^8.5.3",
     "rn-fetch-blob": "^0.12.0",
     "rn-tourguide": "bluesky-social/rn-tourguide",
@@ -200,6 +203,7 @@
     "statsig-react-native-expo": "^4.6.1",
     "tippy.js": "^6.3.7",
     "tlds": "^1.234.0",
+    "web-streams-polyfill": "3.1.1",
     "zeego": "^1.6.2",
     "zod": "^3.20.2"
   },

patches/react-server-dom-webpack+19.0.0-canary-adb717393-20240411.patch

@@ -0,0 +1,683 @@
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js
+index dcb23c5..9f5ee0b 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js
+@@ -128,7 +128,7 @@ var chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  var promise = __webpack_require__(id);
++  var promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -195,7 +195,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  var moduleExports = __webpack_require__(metadata[ID]);
++  var moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -227,9 +227,9 @@ var chunkMap = new Map();
+  * of chunks that come from Flight and may not be known to the webpack runtime
+  */
+ 
+-var webpackGetChunkFilename = __webpack_require__.u;
++var webpackGetChunkFilename = __bsky_require__.u;
+ 
+-__webpack_require__.u = function (chunkId) {
++__bsky_require__.u = function (chunkId) {
+   var flightChunk = chunkMap.get(chunkId);
+ 
+   if (flightChunk !== undefined) {
+@@ -241,7 +241,7 @@ __webpack_require__.u = function (chunkId) {
+ 
+ function loadChunk(chunkId, filename) {
+   chunkMap.set(chunkId, filename);
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ var ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js
+index 6ad0195..a400d00 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js
+@@ -81,7 +81,7 @@ const chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  const promise = __webpack_require__(id);
++  const promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -148,7 +148,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  let moduleExports = __webpack_require__(metadata[ID]);
++  let moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -180,9 +180,9 @@ const chunkMap = new Map();
+  * of chunks that come from Flight and may not be known to the webpack runtime
+  */
+ 
+-const webpackGetChunkFilename = __webpack_require__.u;
++const webpackGetChunkFilename = __bsky_require__.u;
+ 
+-__webpack_require__.u = function (chunkId) {
++__bsky_require__.u = function (chunkId) {
+   const flightChunk = chunkMap.get(chunkId);
+ 
+   if (flightChunk !== undefined) {
+@@ -194,7 +194,7 @@ __webpack_require__.u = function (chunkId) {
+ 
+ function loadChunk(chunkId, filename) {
+   chunkMap.set(chunkId, filename);
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ const ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js
+index 8573fab..1b34e95 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js
+@@ -8,8 +8,8 @@
+  LICENSE file in the root directory of this source tree.
+ */
+ 'use strict';var u=require("react-dom"),v={stream:!0};function z(a,b){if(a){var c=a[b[0]];if(a=c[b[2]])c=a.name;else{a=c["*"];if(!a)throw Error('Could not find the module "'+b[0]+'" in the React SSR Manifest. This is probably a bug in the React Server Components bundler.');c=b[2]}return 4===b.length?[a.id,a.chunks,c,1]:[a.id,a.chunks,c]}return b}var A=new Map;
+-function B(a){var b=__webpack_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function C(){}
+-function D(a){for(var b=a[1],c=[],e=0;e<b.length;){var m=b[e++],k=b[e++],g=A.get(m);void 0===g?(E.set(m,k),k=__webpack_chunk_load__(m),c.push(k),g=A.set.bind(A,m,null),k.then(g,C),A.set(m,k)):null!==g&&c.push(g)}return 4===a.length?0===c.length?B(a[0]):Promise.all(c).then(function(){return B(a[0])}):0<c.length?Promise.all(c):null}var E=new Map,aa=__webpack_require__.u;__webpack_require__.u=function(a){var b=E.get(a);return void 0!==b?b:aa(a)};
++function B(a){var b=__bsky_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function C(){}
++function D(a){for(var b=a[1],c=[],e=0;e<b.length;){var m=b[e++],k=b[e++],g=A.get(m);void 0===g?(E.set(m,k),k=__bsky_chunk_load__(m),c.push(k),g=A.set.bind(A,m,null),k.then(g,C),A.set(m,k)):null!==g&&c.push(g)}return 4===a.length?0===c.length?B(a[0]):Promise.all(c).then(function(){return B(a[0])}):0<c.length?Promise.all(c):null}var E=new Map,aa=__bsky_require__.u;__bsky_require__.u=function(a){var b=E.get(a);return void 0!==b?b:aa(a)};
+ var ba=u.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,G=Symbol.for("react.element"),H=Symbol.for("react.lazy"),I=Symbol.iterator;function ca(a){if(null===a||"object"!==typeof a)return null;a=I&&a[I]||a["@@iterator"];return"function"===typeof a?a:null}var da=Array.isArray,J=Object.getPrototypeOf;function K(a,b){var c=a.length;a.push(b);return c}var ea=Object.prototype,L=new WeakMap;
+ function fa(a){return Number.isFinite(a)?0===a&&-Infinity===1/a?"$-0":a:Infinity===a?"$Infinity":-Infinity===a?"$-Infinity":"$NaN"}
+ function ha(a,b,c,e,m){function k(q,d){if(null===d)return null;if("object"===typeof d){switch(d.$$typeof){case G:if(void 0===c)throw Error("React Element cannot be passed to Server Functions from the Client without a temporary reference set. Pass a TemporaryReferenceSet to the options.");return"$T"+K(c,d).toString(16);case H:q=d._payload;var f=d._init;null===l&&(l=new FormData);h++;try{var p=f(q),n=g++,t=JSON.stringify(p,k);l.append(b+n,t);return"$"+n.toString(16)}catch(r){if("object"===typeof r&&
+@@ -21,7 +21,7 @@ function M(a,b,c,e){this.status=a;this.value=b;this.reason=c;this._response=e}M.
+ function ma(a){switch(a.status){case "resolved_model":N(a);break;case "resolved_module":O(a)}switch(a.status){case "fulfilled":return a.value;case "pending":case "blocked":case "cyclic":throw a;default:throw a.reason;}}function P(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}function Q(a,b,c){switch(a.status){case "fulfilled":P(b,a.value);break;case "pending":case "blocked":case "cyclic":a.value=b;a.reason=c;break;case "rejected":c&&P(c,a.reason)}}
+ function R(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&P(c,b)}}function S(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.value,e=a.reason;a.status="resolved_module";a.value=b;null!==c&&(O(a),Q(a,c,e))}}var T=null,U=null;
+ function N(a){var b=T,c=U;T=a;U=null;var e=a.value;a.status="cyclic";a.value=null;a.reason=null;try{var m=JSON.parse(e,a._response._fromJSON);if(null!==U&&0<U.deps)U.value=m,a.status="blocked",a.value=null,a.reason=null;else{var k=a.value;a.status="fulfilled";a.value=m;null!==k&&P(k,m)}}catch(g){a.status="rejected",a.reason=g}finally{T=b,U=c}}
+-function O(a){try{var b=a.value,c=__webpack_require__(b[0]);if(4===b.length&&"function"===typeof c.then)if("fulfilled"===c.status)c=c.value;else throw c.reason;var e="*"===b[2]?c:""===b[2]?c.__esModule?c.default:c:c[b[2]];a.status="fulfilled";a.value=e}catch(m){a.status="rejected",a.reason=m}}function V(a,b){a._chunks.forEach(function(c){"pending"===c.status&&R(c,b)})}function W(a,b){var c=a._chunks,e=c.get(b);e||(e=new M("pending",null,null,a),c.set(b,e));return e}
++function O(a){try{var b=a.value,c=__bsky_require__(b[0]);if(4===b.length&&"function"===typeof c.then)if("fulfilled"===c.status)c=c.value;else throw c.reason;var e="*"===b[2]?c:""===b[2]?c.__esModule?c.default:c:c[b[2]];a.status="fulfilled";a.value=e}catch(m){a.status="rejected",a.reason=m}}function V(a,b){a._chunks.forEach(function(c){"pending"===c.status&&R(c,b)})}function W(a,b){var c=a._chunks,e=c.get(b);e||(e=new M("pending",null,null,a),c.set(b,e));return e}
+ function na(a,b,c,e,m,k){if(U){var g=U;e||g.deps++}else g=U={deps:e?0:1,value:null};return function(h){b[c]=k(m,h);""===c&&null===g.value&&(g.value=b[c]);g.deps--;0===g.deps&&"blocked"===a.status&&(h=a.value,a.status="fulfilled",a.value=g.value,null!==h&&P(h,g.value))}}function oa(a){return function(b){return R(a,b)}}
+ function pa(a,b){function c(){var m=Array.prototype.slice.call(arguments),k=b.bound;return k?"fulfilled"===k.status?e(b.id,k.value.concat(m)):Promise.resolve(k).then(function(g){return e(b.id,g.concat(m))}):e(b.id,m)}var e=a._callServer;L.set(c,b);return c}
+ function X(a,b,c,e,m){b=W(a,b);switch(b.status){case "resolved_model":N(b);break;case "resolved_module":O(b)}switch(b.status){case "fulfilled":return m(a,b.value);case "pending":case "blocked":case "cyclic":var k=T;b.then(na(k,c,e,"cyclic"===b.status,a,m),oa(k));return null;default:throw b.reason;}}function qa(a,b){return new Map(b)}function ra(a,b){return new Set(b)}function sa(a,b){a=new FormData;for(var c=0;c<b.length;c++)a.append(b[c][0],b[c][1]);return a}function ta(a,b){return b}
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js
+index 993d7cd..59a6c24 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js
+@@ -139,7 +139,7 @@ var chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  var promise = __webpack_require__(id);
++  var promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -206,7 +206,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  var moduleExports = __webpack_require__(metadata[ID]);
++  var moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -233,7 +233,7 @@ function requireModule(metadata) {
+ }
+ 
+ function loadChunk(chunkId, filename) {
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ function prepareDestinationWithChunks(moduleLoading, // Chunks are double-indexed [..., idx, filenamex, idy, filenamey, ...]
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js
+index 83b0367..f5b0e0b 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js
+@@ -91,7 +91,7 @@ const chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  const promise = __webpack_require__(id);
++  const promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -158,7 +158,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  let moduleExports = __webpack_require__(metadata[ID]);
++  let moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -185,7 +185,7 @@ function requireModule(metadata) {
+ }
+ 
+ function loadChunk(chunkId, filename) {
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ function prepareDestinationWithChunks(moduleLoading, // Chunks are double-indexed [..., idx, filenamex, idy, filenamey, ...]
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js
+index c00ccd0..661d3a2 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js
+@@ -8,8 +8,8 @@
+  LICENSE file in the root directory of this source tree.
+ */
+ 'use strict';var aa=require("react-dom"),ba={stream:!0};function ca(a,b){if(a){var c=a[b[0]];if(a=c[b[2]])c=a.name;else{a=c["*"];if(!a)throw Error('Could not find the module "'+b[0]+'" in the React SSR Manifest. This is probably a bug in the React Server Components bundler.');c=b[2]}return 4===b.length?[a.id,a.chunks,c,1]:[a.id,a.chunks,c]}return b}var u=new Map;
+-function v(a){var b=__webpack_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function da(){}
+-function ea(a){for(var b=a[1],c=[],d=0;d<b.length;){var f=b[d++];b[d++];var g=u.get(f);if(void 0===g){g=__webpack_chunk_load__(f);c.push(g);var l=u.set.bind(u,f,null);g.then(l,da);u.set(f,g)}else null!==g&&c.push(g)}return 4===a.length?0===c.length?v(a[0]):Promise.all(c).then(function(){return v(a[0])}):0<c.length?Promise.all(c):null}
++function v(a){var b=__bsky_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function da(){}
++function ea(a){for(var b=a[1],c=[],d=0;d<b.length;){var f=b[d++];b[d++];var g=u.get(f);if(void 0===g){g=__bsky_chunk_load__(f);c.push(g);var l=u.set.bind(u,f,null);g.then(l,da);u.set(f,g)}else null!==g&&c.push(g)}return 4===a.length?0===c.length?v(a[0]):Promise.all(c).then(function(){return v(a[0])}):0<c.length?Promise.all(c):null}
+ function fa(a,b,c){if(null!==a)for(var d=1;d<b.length;d+=2){var f=c,g=w.d,l=g.X,k=a.prefix+b[d];var m=a.crossOrigin;m="string"===typeof m?"use-credentials"===m?m:"":void 0;l.call(g,k,{crossOrigin:m,nonce:f})}}var w=aa.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Symbol.for("react.element"),B=Symbol.for("react.lazy"),C=Symbol.iterator;function ha(a){if(null===a||"object"!==typeof a)return null;a=C&&a[C]||a["@@iterator"];return"function"===typeof a?a:null}var ia=Array.isArray,D=Object.getPrototypeOf;
+ function E(a,b){var c=a.length;a.push(b);return c}var ja=Object.prototype,F=new WeakMap;function ka(a){return Number.isFinite(a)?0===a&&-Infinity===1/a?"$-0":a:Infinity===a?"$Infinity":-Infinity===a?"$-Infinity":"$NaN"}
+ function H(a,b,c,d,f){function g(q,e){if(null===e)return null;if("object"===typeof e){switch(e.$$typeof){case A:if(void 0===c)throw Error("React Element cannot be passed to Server Functions from the Client without a temporary reference set. Pass a TemporaryReferenceSet to the options.");return"$T"+E(c,e).toString(16);case B:q=e._payload;var h=e._init;null===m&&(m=new FormData);k++;try{var p=h(q),n=l++,t=JSON.stringify(p,g);m.append(b+n,t);return"$"+n.toString(16)}catch(r){if("object"===typeof r&&
+@@ -26,7 +26,7 @@ function M(a,b,c,d){this.status=a;this.value=b;this.reason=c;this._response=d}M.
+ function ta(a){switch(a.status){case "resolved_model":N(a);break;case "resolved_module":O(a)}switch(a.status){case "fulfilled":return a.value;case "pending":case "blocked":case "cyclic":throw a;default:throw a.reason;}}function P(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}function Q(a,b,c){switch(a.status){case "fulfilled":P(b,a.value);break;case "pending":case "blocked":case "cyclic":a.value=b;a.reason=c;break;case "rejected":c&&P(c,a.reason)}}
+ function R(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&P(c,b)}}function S(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.value,d=a.reason;a.status="resolved_module";a.value=b;null!==c&&(O(a),Q(a,c,d))}}var T=null,U=null;
+ function N(a){var b=T,c=U;T=a;U=null;var d=a.value;a.status="cyclic";a.value=null;a.reason=null;try{var f=JSON.parse(d,a._response._fromJSON);if(null!==U&&0<U.deps)U.value=f,a.status="blocked",a.value=null,a.reason=null;else{var g=a.value;a.status="fulfilled";a.value=f;null!==g&&P(g,f)}}catch(l){a.status="rejected",a.reason=l}finally{T=b,U=c}}
+-function O(a){try{var b=a.value,c=__webpack_require__(b[0]);if(4===b.length&&"function"===typeof c.then)if("fulfilled"===c.status)c=c.value;else throw c.reason;var d="*"===b[2]?c:""===b[2]?c.__esModule?c.default:c:c[b[2]];a.status="fulfilled";a.value=d}catch(f){a.status="rejected",a.reason=f}}function V(a,b){a._chunks.forEach(function(c){"pending"===c.status&&R(c,b)})}function W(a,b){var c=a._chunks,d=c.get(b);d||(d=new M("pending",null,null,a),c.set(b,d));return d}
++function O(a){try{var b=a.value,c=__bsky_require__(b[0]);if(4===b.length&&"function"===typeof c.then)if("fulfilled"===c.status)c=c.value;else throw c.reason;var d="*"===b[2]?c:""===b[2]?c.__esModule?c.default:c:c[b[2]];a.status="fulfilled";a.value=d}catch(f){a.status="rejected",a.reason=f}}function V(a,b){a._chunks.forEach(function(c){"pending"===c.status&&R(c,b)})}function W(a,b){var c=a._chunks,d=c.get(b);d||(d=new M("pending",null,null,a),c.set(b,d));return d}
+ function ua(a,b,c,d,f,g){if(U){var l=U;d||l.deps++}else l=U={deps:d?0:1,value:null};return function(k){b[c]=g(f,k);""===c&&null===l.value&&(l.value=b[c]);l.deps--;0===l.deps&&"blocked"===a.status&&(k=a.value,a.status="fulfilled",a.value=l.value,null!==k&&P(k,l.value))}}function va(a){return function(b){return R(a,b)}}
+ function wa(a,b){function c(){var f=Array.prototype.slice.call(arguments),g=b.bound;return g?"fulfilled"===g.status?d(b.id,g.value.concat(f)):Promise.resolve(g).then(function(l){return d(b.id,l.concat(f))}):d(b.id,f)}var d=a._callServer;K(c,b,a._encodeFormAction);return c}
+ function X(a,b,c,d,f){b=W(a,b);switch(b.status){case "resolved_model":N(b);break;case "resolved_module":O(b)}switch(b.status){case "fulfilled":return f(a,b.value);case "pending":case "blocked":case "cyclic":var g=T;b.then(ua(g,c,d,"cyclic"===b.status,a,f),va(g));return null;default:throw b.reason;}}function xa(a,b){return new Map(b)}function ya(a,b){return new Set(b)}function za(a,b){a=new FormData;for(var c=0;c<b.length;c++)a.append(b[c][0],b[c][1]);return a}function Aa(a,b){return b}
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js
+index 6a03153..f9143a7 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js
+@@ -140,7 +140,7 @@ var chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  var promise = __webpack_require__(id);
++  var promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -207,7 +207,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  var moduleExports = __webpack_require__(metadata[ID]);
++  var moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -234,7 +234,7 @@ function requireModule(metadata) {
+ }
+ 
+ function loadChunk(chunkId, filename) {
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ function prepareDestinationWithChunks(moduleLoading, // Chunks are double-indexed [..., idx, filenamex, idy, filenamey, ...]
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js
+index 62abbfd..f5f1630 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js
+@@ -92,7 +92,7 @@ const chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  const promise = __webpack_require__(id);
++  const promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -159,7 +159,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  let moduleExports = __webpack_require__(metadata[ID]);
++  let moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -186,7 +186,7 @@ function requireModule(metadata) {
+ }
+ 
+ function loadChunk(chunkId, filename) {
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ function prepareDestinationWithChunks(moduleLoading, // Chunks are double-indexed [..., idx, filenamex, idy, filenamey, ...]
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js
+index 6c4162e..d26ec84 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js
+@@ -8,8 +8,8 @@
+  LICENSE file in the root directory of this source tree.
+ */
+ 'use strict';var r=require("util"),t=require("react-dom"),aa={stream:!0};function ba(a,b){if(a){var c=a[b[0]];if(a=c[b[2]])c=a.name;else{a=c["*"];if(!a)throw Error('Could not find the module "'+b[0]+'" in the React SSR Manifest. This is probably a bug in the React Server Components bundler.');c=b[2]}return 4===b.length?[a.id,a.chunks,c,1]:[a.id,a.chunks,c]}return b}var u=new Map;
+-function x(a){var b=__webpack_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function ca(){}
+-function da(a){for(var b=a[1],c=[],d=0;d<b.length;){var f=b[d++];b[d++];var g=u.get(f);if(void 0===g){g=__webpack_chunk_load__(f);c.push(g);var h=u.set.bind(u,f,null);g.then(h,ca);u.set(f,g)}else null!==g&&c.push(g)}return 4===a.length?0===c.length?x(a[0]):Promise.all(c).then(function(){return x(a[0])}):0<c.length?Promise.all(c):null}
++function x(a){var b=__bsky_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function ca(){}
++function da(a){for(var b=a[1],c=[],d=0;d<b.length;){var f=b[d++];b[d++];var g=u.get(f);if(void 0===g){g=__bsky_chunk_load__(f);c.push(g);var h=u.set.bind(u,f,null);g.then(h,ca);u.set(f,g)}else null!==g&&c.push(g)}return 4===a.length?0===c.length?x(a[0]):Promise.all(c).then(function(){return x(a[0])}):0<c.length?Promise.all(c):null}
+ function ea(a,b,c){if(null!==a)for(var d=1;d<b.length;d+=2){var f=c,g=y.d,h=g.X,l=a.prefix+b[d];var e=a.crossOrigin;e="string"===typeof e?"use-credentials"===e?e:"":void 0;h.call(g,l,{crossOrigin:e,nonce:f})}}var y=t.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Symbol.for("react.element"),A=Symbol.for("react.lazy"),B=Symbol.iterator;function fa(a){if(null===a||"object"!==typeof a)return null;a=B&&a[B]||a["@@iterator"];return"function"===typeof a?a:null}var ha=Array.isArray,D=Object.getPrototypeOf;
+ function E(a,b){var c=a.length;a.push(b);return c}var ia=Object.prototype,F=new WeakMap;function ja(a){return Number.isFinite(a)?0===a&&-Infinity===1/a?"$-0":a:Infinity===a?"$Infinity":-Infinity===a?"$-Infinity":"$NaN"}
+ function ka(a,b,c,d,f){function g(n,k){if(null===k)return null;if("object"===typeof k){switch(k.$$typeof){case z:if(void 0===c)throw Error("React Element cannot be passed to Server Functions from the Client without a temporary reference set. Pass a TemporaryReferenceSet to the options.");return"$T"+E(c,k).toString(16);case A:n=k._payload;var I=k._init;null===e&&(e=new FormData);l++;try{var m=I(n),p=h++,v=JSON.stringify(m,g);e.append(b+p,v);return"$"+p.toString(16)}catch(q){if("object"===typeof q&&
+@@ -26,7 +26,7 @@ function L(a,b,c,d){this.status=a;this.value=b;this.reason=c;this._response=d}L.
+ function ta(a){switch(a.status){case "resolved_model":M(a);break;case "resolved_module":N(a)}switch(a.status){case "fulfilled":return a.value;case "pending":case "blocked":case "cyclic":throw a;default:throw a.reason;}}function Q(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}function R(a,b,c){switch(a.status){case "fulfilled":Q(b,a.value);break;case "pending":case "blocked":case "cyclic":a.value=b;a.reason=c;break;case "rejected":c&&Q(c,a.reason)}}
+ function S(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&Q(c,b)}}function T(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.value,d=a.reason;a.status="resolved_module";a.value=b;null!==c&&(N(a),R(a,c,d))}}var U=null,V=null;
+ function M(a){var b=U,c=V;U=a;V=null;var d=a.value;a.status="cyclic";a.value=null;a.reason=null;try{var f=JSON.parse(d,a._response._fromJSON);if(null!==V&&0<V.deps)V.value=f,a.status="blocked",a.value=null,a.reason=null;else{var g=a.value;a.status="fulfilled";a.value=f;null!==g&&Q(g,f)}}catch(h){a.status="rejected",a.reason=h}finally{U=b,V=c}}
+-function N(a){try{var b=a.value,c=__webpack_require__(b[0]);if(4===b.length&&"function"===typeof c.then)if("fulfilled"===c.status)c=c.value;else throw c.reason;var d="*"===b[2]?c:""===b[2]?c.__esModule?c.default:c:c[b[2]];a.status="fulfilled";a.value=d}catch(f){a.status="rejected",a.reason=f}}function W(a,b){a._chunks.forEach(function(c){"pending"===c.status&&S(c,b)})}function X(a,b){var c=a._chunks,d=c.get(b);d||(d=new L("pending",null,null,a),c.set(b,d));return d}
++function N(a){try{var b=a.value,c=__bsky_require__(b[0]);if(4===b.length&&"function"===typeof c.then)if("fulfilled"===c.status)c=c.value;else throw c.reason;var d="*"===b[2]?c:""===b[2]?c.__esModule?c.default:c:c[b[2]];a.status="fulfilled";a.value=d}catch(f){a.status="rejected",a.reason=f}}function W(a,b){a._chunks.forEach(function(c){"pending"===c.status&&S(c,b)})}function X(a,b){var c=a._chunks,d=c.get(b);d||(d=new L("pending",null,null,a),c.set(b,d));return d}
+ function ua(a,b,c,d,f,g){if(V){var h=V;d||h.deps++}else h=V={deps:d?0:1,value:null};return function(l){b[c]=g(f,l);""===c&&null===h.value&&(h.value=b[c]);h.deps--;0===h.deps&&"blocked"===a.status&&(l=a.value,a.status="fulfilled",a.value=h.value,null!==l&&Q(l,h.value))}}function va(a){return function(b){return S(a,b)}}
+ function wa(a,b){function c(){var f=Array.prototype.slice.call(arguments),g=b.bound;return g?"fulfilled"===g.status?d(b.id,g.value.concat(f)):Promise.resolve(g).then(function(h){return d(b.id,h.concat(f))}):d(b.id,f)}var d=a._callServer;J(c,b,a._encodeFormAction);return c}
+ function Y(a,b,c,d,f){b=X(a,b);switch(b.status){case "resolved_model":M(b);break;case "resolved_module":N(b)}switch(b.status){case "fulfilled":return f(a,b.value);case "pending":case "blocked":case "cyclic":var g=U;b.then(ua(g,c,d,"cyclic"===b.status,a,f),va(g));return null;default:throw b.reason;}}function xa(a,b){return new Map(b)}function ya(a,b){return new Set(b)}function za(a,b){a=new FormData;for(var c=0;c<b.length;c++)a.append(b[c][0],b[c][1]);return a}function Aa(a,b){return b}
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js
+index 17c270d..74f4ef3 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js
+@@ -3301,7 +3301,7 @@ var chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  var promise = __webpack_require__(id);
++  var promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -3368,7 +3368,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  var moduleExports = __webpack_require__(metadata[ID]);
++  var moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -3400,9 +3400,9 @@ var chunkMap = new Map();
+  * of chunks that come from Flight and may not be known to the webpack runtime
+  */
+ 
+-var webpackGetChunkFilename = __webpack_require__.u;
++var webpackGetChunkFilename = __bsky_require__.u;
+ 
+-__webpack_require__.u = function (chunkId) {
++__bsky_require__.u = function (chunkId) {
+   var flightChunk = chunkMap.get(chunkId);
+ 
+   if (flightChunk !== undefined) {
+@@ -3414,7 +3414,7 @@ __webpack_require__.u = function (chunkId) {
+ 
+ function loadChunk(chunkId, filename) {
+   chunkMap.set(chunkId, filename);
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ // The server acts as a Client of itself when resolving Server References.
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js
+index da256f7..040d06d 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js
+@@ -2650,7 +2650,7 @@ const chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  const promise = __webpack_require__(id);
++  const promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -2717,7 +2717,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  let moduleExports = __webpack_require__(metadata[ID]);
++  let moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -2749,9 +2749,9 @@ const chunkMap = new Map();
+  * of chunks that come from Flight and may not be known to the webpack runtime
+  */
+ 
+-const webpackGetChunkFilename = __webpack_require__.u;
++const webpackGetChunkFilename = __bsky_require__.u;
+ 
+-__webpack_require__.u = function (chunkId) {
++__bsky_require__.u = function (chunkId) {
+   const flightChunk = chunkMap.get(chunkId);
+ 
+   if (flightChunk !== undefined) {
+@@ -2763,7 +2763,7 @@ __webpack_require__.u = function (chunkId) {
+ 
+ function loadChunk(chunkId, filename) {
+   chunkMap.set(chunkId, filename);
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ // The server acts as a Client of itself when resolving Server References.
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js
+index e33cbce..9cd2ef6 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js
+@@ -60,9 +60,9 @@ function gb(a){var b=K.H;K.H=Pa;var c=x;F=x=a;try{var e=a.pingedTasks;a.pingedTa
+ function P(a,b){l=new Uint8Array(2048);n=0;try{for(var c=a.completedImportChunks,e=0;e<c.length;e++)a.pendingChunks--,p(b,c[e]);c.splice(0,e);var d=a.completedHintChunks;for(e=0;e<d.length;e++)p(b,d[e]);d.splice(0,e);var g=a.completedRegularChunks;for(e=0;e<g.length;e++)a.pendingChunks--,p(b,g[e]);g.splice(0,e);var f=a.completedErrorChunks;for(e=0;e<f.length;e++)a.pendingChunks--,p(b,f[e]);f.splice(0,e)}finally{a.flushScheduled=!1,l&&0<n&&(b.enqueue(new Uint8Array(l.buffer,0,n)),l=null,n=0)}0===a.pendingChunks&&
+ b.close()}function lb(a,b){try{var c=a.abortableTasks;if(0<c.size){a.pendingChunks++;var e=a.nextChunkId++,d=void 0===b?Error("The render was aborted by the server without a reason."):b,g=N(a,d);O(a,e,g,d);c.forEach(function(f){f.status=3;var h=T(e);f=hb(a,f.id,h);a.completedErrorChunks.push(f)});c.clear()}null!==a.destination&&P(a,a.destination)}catch(f){N(a,f),kb(a,f)}}
+ function mb(a,b){var c="",e=a[b];if(e)c=e.name;else{var d=b.lastIndexOf("#");-1!==d&&(c=b.slice(d+1),e=a[b.slice(0,d)]);if(!e)throw Error('Could not find the module "'+b+'" in the React Server Manifest. This is probably a bug in the React Server Components bundler.');}return[e.id,e.chunks,c]}var nb=new Map;
+-function ob(a){var b=__webpack_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function pb(){}
+-function qb(a){for(var b=a[1],c=[],e=0;e<b.length;){var d=b[e++],g=b[e++],f=nb.get(d);void 0===f?(rb.set(d,g),g=__webpack_chunk_load__(d),c.push(g),f=nb.set.bind(nb,d,null),g.then(f,pb),nb.set(d,g)):null!==f&&c.push(f)}return 4===a.length?0===c.length?ob(a[0]):Promise.all(c).then(function(){return ob(a[0])}):0<c.length?Promise.all(c):null}
+-function W(a){var b=__webpack_require__(a[0]);if(4===a.length&&"function"===typeof b.then)if("fulfilled"===b.status)b=b.value;else throw b.reason;return"*"===a[2]?b:""===a[2]?b.__esModule?b.default:b:b[a[2]]}var rb=new Map,sb=__webpack_require__.u;__webpack_require__.u=function(a){var b=rb.get(a);return void 0!==b?b:sb(a)};function tb(a,b,c,e){this.status=a;this.value=b;this.reason=c;this._response=e}tb.prototype=Object.create(Promise.prototype);
++function ob(a){var b=__bsky_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function pb(){}
++function qb(a){for(var b=a[1],c=[],e=0;e<b.length;){var d=b[e++],g=b[e++],f=nb.get(d);void 0===f?(rb.set(d,g),g=__bsky_chunk_load__(d),c.push(g),f=nb.set.bind(nb,d,null),g.then(f,pb),nb.set(d,g)):null!==f&&c.push(f)}return 4===a.length?0===c.length?ob(a[0]):Promise.all(c).then(function(){return ob(a[0])}):0<c.length?Promise.all(c):null}
++function W(a){var b=__bsky_require__(a[0]);if(4===a.length&&"function"===typeof b.then)if("fulfilled"===b.status)b=b.value;else throw b.reason;return"*"===a[2]?b:""===a[2]?b.__esModule?b.default:b:b[a[2]]}var rb=new Map,sb=__bsky_require__.u;__bsky_require__.u=function(a){var b=rb.get(a);return void 0!==b?b:sb(a)};function tb(a,b,c,e){this.status=a;this.value=b;this.reason=c;this._response=e}tb.prototype=Object.create(Promise.prototype);
+ tb.prototype.then=function(a,b){switch(this.status){case "resolved_model":ub(this)}switch(this.status){case "fulfilled":a(this.value);break;case "pending":case "blocked":a&&(null===this.value&&(this.value=[]),this.value.push(a));b&&(null===this.reason&&(this.reason=[]),this.reason.push(b));break;default:b(this.reason)}};function vb(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}
+ function wb(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&vb(c,b)}}function xb(a,b,c,e,d,g){var f=mb(a._bundlerConfig,b);a=qb(f);if(c)c=Promise.all([c,a]).then(function(h){h=h[0];var k=W(f);return k.bind.apply(k,[null].concat(h))});else if(a)c=Promise.resolve(a).then(function(){return W(f)});else return W(f);c.then(yb(e,d,g),zb(e));return null}var X=null,Y=null;
+ function ub(a){var b=X,c=Y;X=a;Y=null;try{var e=JSON.parse(a.value,a._response._fromJSON);null!==Y&&0<Y.deps?(Y.value=e,a.status="blocked",a.value=null,a.reason=null):(a.status="fulfilled",a.value=e)}catch(d){a.status="rejected",a.reason=d}finally{X=b,Y=c}}function Ab(a,b){a._chunks.forEach(function(c){"pending"===c.status&&wb(c,b)})}
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js
+index bca3958..08e4c00 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js
+@@ -3324,7 +3324,7 @@ var chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  var promise = __webpack_require__(id);
++  var promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -3391,7 +3391,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  var moduleExports = __webpack_require__(metadata[ID]);
++  var moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -3418,7 +3418,7 @@ function requireModule(metadata) {
+ }
+ 
+ function loadChunk(chunkId, filename) {
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ // The server acts as a Client of itself when resolving Server References.
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js
+index 03ef137..457d5d8 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js
+@@ -2673,7 +2673,7 @@ const chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  const promise = __webpack_require__(id);
++  const promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -2740,7 +2740,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  let moduleExports = __webpack_require__(metadata[ID]);
++  let moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -2767,7 +2767,7 @@ function requireModule(metadata) {
+ }
+ 
+ function loadChunk(chunkId, filename) {
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ // The server acts as a Client of itself when resolving Server References.
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js
+index a2a2408..f249bf6 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js
+@@ -62,9 +62,9 @@ function R(a,b){m=new Uint8Array(2048);n=0;try{for(var c=a.completedImportChunks
+ b.close()}function pb(a){a.flushScheduled=null!==a.destination;B?setTimeout(function(){return ua.run(a,kb,a)},0):setTimeout(function(){return kb(a)},0)}function cb(a){if(!1===a.flushScheduled&&0===a.pingedTasks.length&&null!==a.destination){var b=a.destination;a.flushScheduled=!0;setTimeout(function(){return R(a,b)},0)}}
+ function qb(a,b){try{var c=a.abortableTasks;if(0<c.size){a.pendingChunks++;var e=a.nextChunkId++,d=void 0===b?Error("The render was aborted by the server without a reason."):b,g=P(a,d);Q(a,e,g,d);c.forEach(function(f){f.status=3;var h=T(e);f=lb(a,f.id,h);a.completedErrorChunks.push(f)});c.clear()}null!==a.destination&&R(a,a.destination)}catch(f){P(a,f),ob(a,f)}}
+ function rb(a,b){var c="",e=a[b];if(e)c=e.name;else{var d=b.lastIndexOf("#");-1!==d&&(c=b.slice(d+1),e=a[b.slice(0,d)]);if(!e)throw Error('Could not find the module "'+b+'" in the React Server Manifest. This is probably a bug in the React Server Components bundler.');}return[e.id,e.chunks,c]}var sb=new Map;
+-function tb(a){var b=__webpack_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function ub(){}
+-function vb(a){for(var b=a[1],c=[],e=0;e<b.length;){var d=b[e++];b[e++];var g=sb.get(d);if(void 0===g){g=__webpack_chunk_load__(d);c.push(g);var f=sb.set.bind(sb,d,null);g.then(f,ub);sb.set(d,g)}else null!==g&&c.push(g)}return 4===a.length?0===c.length?tb(a[0]):Promise.all(c).then(function(){return tb(a[0])}):0<c.length?Promise.all(c):null}
+-function W(a){var b=__webpack_require__(a[0]);if(4===a.length&&"function"===typeof b.then)if("fulfilled"===b.status)b=b.value;else throw b.reason;return"*"===a[2]?b:""===a[2]?b.__esModule?b.default:b:b[a[2]]}function wb(a,b,c,e){this.status=a;this.value=b;this.reason=c;this._response=e}wb.prototype=Object.create(Promise.prototype);
++function tb(a){var b=__bsky_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function ub(){}
++function vb(a){for(var b=a[1],c=[],e=0;e<b.length;){var d=b[e++];b[e++];var g=sb.get(d);if(void 0===g){g=__bsky_chunk_load__(d);c.push(g);var f=sb.set.bind(sb,d,null);g.then(f,ub);sb.set(d,g)}else null!==g&&c.push(g)}return 4===a.length?0===c.length?tb(a[0]):Promise.all(c).then(function(){return tb(a[0])}):0<c.length?Promise.all(c):null}
++function W(a){var b=__bsky_require__(a[0]);if(4===a.length&&"function"===typeof b.then)if("fulfilled"===b.status)b=b.value;else throw b.reason;return"*"===a[2]?b:""===a[2]?b.__esModule?b.default:b:b[a[2]]}function wb(a,b,c,e){this.status=a;this.value=b;this.reason=c;this._response=e}wb.prototype=Object.create(Promise.prototype);
+ wb.prototype.then=function(a,b){switch(this.status){case "resolved_model":xb(this)}switch(this.status){case "fulfilled":a(this.value);break;case "pending":case "blocked":a&&(null===this.value&&(this.value=[]),this.value.push(a));b&&(null===this.reason&&(this.reason=[]),this.reason.push(b));break;default:b(this.reason)}};function yb(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}
+ function zb(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&yb(c,b)}}function Ab(a,b,c,e,d,g){var f=rb(a._bundlerConfig,b);a=vb(f);if(c)c=Promise.all([c,a]).then(function(h){h=h[0];var k=W(f);return k.bind.apply(k,[null].concat(h))});else if(a)c=Promise.resolve(a).then(function(){return W(f)});else return W(f);c.then(Bb(e,d,g),Cb(e));return null}var X=null,Y=null;
+ function xb(a){var b=X,c=Y;X=a;Y=null;try{var e=JSON.parse(a.value,a._response._fromJSON);null!==Y&&0<Y.deps?(Y.value=e,a.status="blocked",a.value=null,a.reason=null):(a.status="fulfilled",a.value=e)}catch(d){a.status="rejected",a.reason=d}finally{X=b,Y=c}}function Db(a,b){a._chunks.forEach(function(c){"pending"===c.status&&zb(c,b)})}
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js
+index 8b8345e..fa6ba3a 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js
+@@ -3377,7 +3377,7 @@ var chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  var promise = __webpack_require__(id);
++  var promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -3444,7 +3444,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  var moduleExports = __webpack_require__(metadata[ID]);
++  var moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -3471,7 +3471,7 @@ function requireModule(metadata) {
+ }
+ 
+ function loadChunk(chunkId, filename) {
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ // The server acts as a Client of itself when resolving Server References.
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js
+index a643b5a..0bbba48 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js
+@@ -2742,7 +2742,7 @@ const chunkCache = new Map();
+ 
+ function requireAsyncModule(id) {
+   // We've already loaded all the chunks. We can require the module.
+-  const promise = __webpack_require__(id);
++  const promise = __bsky_require__(id);
+ 
+   if (typeof promise.then !== 'function') {
+     // This wasn't a promise after all.
+@@ -2809,7 +2809,7 @@ function preloadModule(metadata) {
+ // Increase priority if necessary.
+ 
+ function requireModule(metadata) {
+-  let moduleExports = __webpack_require__(metadata[ID]);
++  let moduleExports = __bsky_require__(metadata[ID]);
+ 
+   if (isAsyncImport(metadata)) {
+     if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -2836,7 +2836,7 @@ function requireModule(metadata) {
+ }
+ 
+ function loadChunk(chunkId, filename) {
+-  return __webpack_chunk_load__(chunkId);
++  return __bsky_chunk_load__(chunkId);
+ }
+ 
+ // The server acts as a Client of itself when resolving Server References.
+diff --git a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js
+index 8a88b6e..b4f74ce 100644
+--- a/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js
++++ b/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js
+@@ -65,9 +65,9 @@ null;d++;break}g.splice(0,d)}finally{a.flushScheduled=!1,l&&0<m&&b.write(l.subar
+ function sb(a,b){if(1===a.status)a.status=2,b.destroy(a.fatalError);else if(2!==a.status&&null===a.destination){a.destination=b;try{R(a,b)}catch(c){P(a,c),qb(a,c)}}}
+ function tb(a,b){try{var c=a.abortableTasks;if(0<c.size){a.pendingChunks++;var d=a.nextChunkId++,e=void 0===b?Error("The render was aborted by the server without a reason."):b,f=P(a,e);Q(a,d,f,e);c.forEach(function(g){g.status=3;var k=T(d);g=nb(a,g.id,k);a.completedErrorChunks.push(g)});c.clear()}null!==a.destination&&R(a,a.destination)}catch(g){P(a,g),qb(a,g)}}
+ function ub(a,b){var c="",d=a[b];if(d)c=d.name;else{var e=b.lastIndexOf("#");-1!==e&&(c=b.slice(e+1),d=a[b.slice(0,e)]);if(!d)throw Error('Could not find the module "'+b+'" in the React Server Manifest. This is probably a bug in the React Server Components bundler.');}return[d.id,d.chunks,c]}var vb=new Map;
+-function wb(a){var b=__webpack_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function xb(){}
+-function yb(a){for(var b=a[1],c=[],d=0;d<b.length;){var e=b[d++];b[d++];var f=vb.get(e);if(void 0===f){f=__webpack_chunk_load__(e);c.push(f);var g=vb.set.bind(vb,e,null);f.then(g,xb);vb.set(e,f)}else null!==f&&c.push(f)}return 4===a.length?0===c.length?wb(a[0]):Promise.all(c).then(function(){return wb(a[0])}):0<c.length?Promise.all(c):null}
+-function W(a){var b=__webpack_require__(a[0]);if(4===a.length&&"function"===typeof b.then)if("fulfilled"===b.status)b=b.value;else throw b.reason;return"*"===a[2]?b:""===a[2]?b.__esModule?b.default:b:b[a[2]]}function zb(a,b,c,d){this.status=a;this.value=b;this.reason=c;this._response=d}zb.prototype=Object.create(Promise.prototype);
++function wb(a){var b=__bsky_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function xb(){}
++function yb(a){for(var b=a[1],c=[],d=0;d<b.length;){var e=b[d++];b[d++];var f=vb.get(e);if(void 0===f){f=__bsky_chunk_load__(e);c.push(f);var g=vb.set.bind(vb,e,null);f.then(g,xb);vb.set(e,f)}else null!==f&&c.push(f)}return 4===a.length?0===c.length?wb(a[0]):Promise.all(c).then(function(){return wb(a[0])}):0<c.length?Promise.all(c):null}
++function W(a){var b=__bsky_require__(a[0]);if(4===a.length&&"function"===typeof b.then)if("fulfilled"===b.status)b=b.value;else throw b.reason;return"*"===a[2]?b:""===a[2]?b.__esModule?b.default:b:b[a[2]]}function zb(a,b,c,d){this.status=a;this.value=b;this.reason=c;this._response=d}zb.prototype=Object.create(Promise.prototype);
+ zb.prototype.then=function(a,b){switch(this.status){case "resolved_model":Ab(this)}switch(this.status){case "fulfilled":a(this.value);break;case "pending":case "blocked":a&&(null===this.value&&(this.value=[]),this.value.push(a));b&&(null===this.reason&&(this.reason=[]),this.reason.push(b));break;default:b(this.reason)}};function Bb(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}
+ function Cb(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&Bb(c,b)}}function Db(a,b,c,d,e,f){var g=ub(a._bundlerConfig,b);a=yb(g);if(c)c=Promise.all([c,a]).then(function(k){k=k[0];var h=W(g);return h.bind.apply(h,[null].concat(k))});else if(a)c=Promise.resolve(a).then(function(){return W(g)});else return W(g);c.then(Eb(d,e,f),Fb(d));return null}var X=null,Y=null;
+ function Ab(a){var b=X,c=Y;X=a;Y=null;try{var d=JSON.parse(a.value,a._response._fromJSON);null!==Y&&0<Y.deps?(Y.value=d,a.status="blocked",a.value=null,a.reason=null):(a.status="fulfilled",a.value=d)}catch(e){a.status="rejected",a.reason=e}finally{X=b,Y=c}}function Gb(a,b){a._chunks.forEach(function(c){"pending"===c.status&&Cb(c,b)})}
+diff --git a/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js b/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js
+index 0f6aa55..baf15f0 100644
+--- a/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js
++++ b/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js
+@@ -125,7 +125,7 @@
+ 
+   function requireAsyncModule(id) {
+     // We've already loaded all the chunks. We can require the module.
+-    var promise = __webpack_require__(id);
++    var promise = __bsky_require__(id);
+ 
+     if (typeof promise.then !== 'function') {
+       // This wasn't a promise after all.
+@@ -192,7 +192,7 @@
+   // Increase priority if necessary.
+ 
+   function requireModule(metadata) {
+-    var moduleExports = __webpack_require__(metadata[ID]);
++    var moduleExports = __bsky_require__(metadata[ID]);
+ 
+     if (isAsyncImport(metadata)) {
+       if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -224,9 +224,9 @@
+    * of chunks that come from Flight and may not be known to the webpack runtime
+    */
+ 
+-  var webpackGetChunkFilename = __webpack_require__.u;
++  var webpackGetChunkFilename = __bsky_require__.u;
+ 
+-  __webpack_require__.u = function (chunkId) {
++  __bsky_require__.u = function (chunkId) {
+     var flightChunk = chunkMap.get(chunkId);
+ 
+     if (flightChunk !== undefined) {
+@@ -238,7 +238,7 @@
+ 
+   function loadChunk(chunkId, filename) {
+     chunkMap.set(chunkId, filename);
+-    return __webpack_chunk_load__(chunkId);
++    return __bsky_chunk_load__(chunkId);
+   }
+ 
+   var ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+diff --git a/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js b/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js
+index 3d11f8f..7fc4655 100644
+--- a/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js
++++ b/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js
+@@ -9,7 +9,7 @@
+  */
+ 
+ 'use strict';(function(){(function(t,y){"object"===typeof exports&&"undefined"!==typeof module?y(exports,require("react-dom")):"function"===typeof define&&define.amd?define(["exports","react-dom"],y):(t="undefined"!==typeof globalThis?globalThis:t||self,y(t.ReactServerDOMClient={},t.ReactDOM))})(this,function(t,y){function X(a,b){if(a){var c=a[b[0]];if(a=c[b[2]])c=a.name;else{a=c["*"];if(!a)throw Error('Could not find the module "'+b[0]+'" in the React SSR Manifest. This is probably a bug in the React Server Components bundler.');
+-c=b[2]}return 4===b.length?[a.id,a.chunks,c,1]:[a.id,a.chunks,c]}return b}function O(a){var b=__webpack_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function Y(){}function Z(a){for(var b=a[1],c=[],e=0;e<b.length;){var m=b[e++],k=b[e++],h=E.get(m);void 0===h?(P.set(m,k),k=__webpack_chunk_load__(m),c.push(k),h=E.set.bind(E,m,null),k.then(h,Y),E.set(m,k)):null!==
++c=b[2]}return 4===b.length?[a.id,a.chunks,c,1]:[a.id,a.chunks,c]}return b}function O(a){var b=__bsky_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function Y(){}function Z(a){for(var b=a[1],c=[],e=0;e<b.length;){var m=b[e++],k=b[e++],h=E.get(m);void 0===h?(P.set(m,k),k=__bsky_chunk_load__(m),c.push(k),h=E.set.bind(E,m,null),k.then(h,Y),E.set(m,k)):null!==
+ h&&c.push(h)}return 4===a.length?0===c.length?O(a[0]):Promise.all(c).then(function(){return O(a[0])}):0<c.length?Promise.all(c):null}function aa(a){if(null===a||"object"!==typeof a)return null;a=Q&&a[Q]||a["@@iterator"];return"function"===typeof a?a:null}function F(a,b){var c=a.length;a.push(b);return c}function ba(a){return Number.isFinite(a)?0===a&&-Infinity===1/a?"$-0":a:Infinity===a?"$Infinity":-Infinity===a?"$-Infinity":"$NaN"}function ca(a,b,c,e,m){function k(q,d){if(null===d)return null;if("object"===
+ typeof d){switch(d.$$typeof){case G:if(void 0===c)throw Error("React Element cannot be passed to Server Functions from the Client without a temporary reference set. Pass a TemporaryReferenceSet to the options.");return"$T"+F(c,d).toString(16);case R:q=d._payload;var f=d._init;null===l&&(l=new FormData);g++;try{var p=f(q),n=h++,u=JSON.stringify(p,k);l.append(b+n,u);return"$"+n.toString(16)}catch(r){if("object"===typeof r&&null!==r&&"function"===typeof r.then){g++;var z=h++;p=function(){try{var A=JSON.stringify(d,
+ k),H=l;H.append(b+z,A);g--;0===g&&e(H)}catch(da){m(da)}};r.then(p,p);return"$"+z.toString(16)}m(r);return null}finally{g--}}if("function"===typeof d.then){null===l&&(l=new FormData);g++;var x=h++;d.then(function(r){try{var A=JSON.stringify(r,k);r=l;r.append(b+x,A);g--;0===g&&e(r)}catch(H){m(H)}},function(r){m(r)});return"$@"+x.toString(16)}if(ea(d))return d;if(d instanceof FormData){null===l&&(l=new FormData);var fa=l;p=h++;var ha=b+p+"_";d.forEach(function(r,A){fa.append(ha+A,r)});return"$K"+p.toString(16)}if(d instanceof
+@@ -18,7 +18,7 @@ typeof d){if("Z"===d[d.length-1]&&this[q]instanceof Date)return"$D"+d;p="$"===d[
+ return"$T"+F(c,d).toString(16)}if("symbol"===typeof d){if(void 0===c)throw Error("Symbols cannot be passed to a Server Function without a temporary reference set. Pass a TemporaryReferenceSet to the options.");return"$T"+F(c,d).toString(16)}if("bigint"===typeof d)return"$n"+d.toString(10);throw Error("Type "+typeof d+" is not supported as an argument to a Server Function.");}var h=1,g=0,l=null;a=JSON.stringify(a,k);null===l?e(a):(l.set(b+"0",a),0===g&&e(l))}function ja(a,b,c){M.set(a,b)}function w(a,
+ b,c,e){this.status=a;this.value=b;this.reason=c;this._response=e}function ka(a){switch(a.status){case "resolved_model":I(a);break;case "resolved_module":J(a)}switch(a.status){case "fulfilled":return a.value;case "pending":case "blocked":case "cyclic":throw a;default:throw a.reason;}}function B(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}function T(a,b,c){switch(a.status){case "fulfilled":B(b,a.value);break;case "pending":case "blocked":case "cyclic":a.value=b;a.reason=c;break;case "rejected":c&&B(c,
+ a.reason)}}function K(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&B(c,b)}}function U(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.value,e=a.reason;a.status="resolved_module";a.value=b;null!==c&&(J(a),T(a,c,e))}}function I(a){var b=L,c=v;L=a;v=null;var e=a.value;a.status="cyclic";a.value=null;a.reason=null;try{var m=JSON.parse(e,a._response._fromJSON);if(null!==v&&0<v.deps)v.value=m,a.status="blocked",a.value=null,a.reason=
+-null;else{var k=a.value;a.status="fulfilled";a.value=m;null!==k&&B(k,m)}}catch(h){a.status="rejected",a.reason=h}finally{L=b,v=c}}function J(a){try{var b=a.value,c=__webpack_require__(b[0]);if(4===b.length&&"function"===typeof c.then)if("fulfilled"===c.status)c=c.value;else throw c.reason;var e="*"===b[2]?c:""===b[2]?c.__esModule?c.default:c:c[b[2]];a.status="fulfilled";a.value=e}catch(m){a.status="rejected",a.reason=m}}function N(a,b){a._chunks.forEach(function(c){"pending"===c.status&&K(c,b)})}
++null;else{var k=a.value;a.status="fulfilled";a.value=m;null!==k&&B(k,m)}}catch(h){a.status="rejected",a.reason=h}finally{L=b,v=c}}function J(a){try{var b=a.value,c=__bsky_require__(b[0]);if(4===b.length&&"function"===typeof c.then)if("fulfilled"===c.status)c=c.value;else throw c.reason;var e="*"===b[2]?c:""===b[2]?c.__esModule?c.default:c:c[b[2]];a.status="fulfilled";a.value=e}catch(m){a.status="rejected",a.reason=m}}function N(a,b){a._chunks.forEach(function(c){"pending"===c.status&&K(c,b)})}
+ function C(a,b){var c=a._chunks,e=c.get(b);e||(e=new w("pending",null,null,a),c.set(b,e));return e}function la(a,b,c,e,m,k){if(v){var h=v;e||h.deps++}else h=v={deps:e?0:1,value:null};return function(g){b[c]=k(m,g);""===c&&null===h.value&&(h.value=b[c]);h.deps--;0===h.deps&&"blocked"===a.status&&(g=a.value,a.status="fulfilled",a.value=h.value,null!==g&&B(g,h.value))}}function ma(a){return function(b){return K(a,b)}}function na(a,b){var c=a._callServer;a=function(){var e=Array.prototype.slice.call(arguments),
+ m=b.bound;return m?"fulfilled"===m.status?c(b.id,m.value.concat(e)):Promise.resolve(m).then(function(k){return c(b.id,k.concat(e))}):c(b.id,e)};M.set(a,b);return a}function D(a,b,c,e,m){b=C(a,b);switch(b.status){case "resolved_model":I(b);break;case "resolved_module":J(b)}switch(b.status){case "fulfilled":return m(a,b.value);case "pending":case "blocked":case "cyclic":var k=L;b.then(la(k,c,e,"cyclic"===b.status,a,m),ma(k));return null;default:throw b.reason;}}function oa(a,b){return new Map(b)}function pa(a,
+ b){return new Set(b)}function qa(a,b){a=new FormData;for(var c=0;c<b.length;c++)a.append(b[c][0],b[c][1]);return a}function ra(a,b){return b}function sa(a,b,c,e){if("$"===e[0]){if("$"===e)return G;switch(e[1]){case "$":return e.slice(1);case "L":return b=parseInt(e.slice(2),16),a=C(a,b),{$$typeof:R,_payload:a,_init:ka};case "@":if(2===e.length)return new Promise(function(){});b=parseInt(e.slice(2),16);return C(a,b);case "S":return Symbol.for(e.slice(2));case "F":return e=parseInt(e.slice(2),16),D(a,
+@@ -30,6 +30,6 @@ f=a._rowLength;k=a._buffer;for(var p=h.length;g<p;){var n=-1;switch(l){case 0:n=
+ q,d);break;case 72:q=d[0];d=d.slice(1);f=JSON.parse(d,f._fromJSON);d=xa.d;switch(q){case "D":d.D(f);break;case "C":"string"===typeof f?d.C(f):d.C(f[0],f[1]);break;case "L":q=f[0];g=f[1];3===f.length?d.L(q,g,f[2]):d.L(q,g);break;case "m":"string"===typeof f?d.m(f):d.m(f[0],f[1]);break;case "X":"string"===typeof f?d.X(f):d.X(f[0],f[1]);break;case "S":"string"===typeof f?d.S(f):d.S(f[0],0===f[1]?void 0:f[1],3===f.length?f[2]:void 0);break;case "M":"string"===typeof f?d.M(f):d.M(f[0],f[1])}break;case 69:d=
+ JSON.parse(d);g=d.digest;d=Error("An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.");d.stack="Error: "+d.message;d.digest=g;g=f._chunks;(u=g.get(q))?K(u,d):g.set(q,new w("rejected",null,d,f));break;case 84:f._chunks.set(q,new w("fulfilled",d,null,f));break;case 68:case 87:throw Error("Failed to read a RSC payload created by a development version of React on the server while using a production version on the client. Always use matching versions on the server and the client.");
+ default:g=f._chunks,(u=g.get(q))?(f=u,q=d,"pending"===f.status&&(d=f.value,g=f.reason,f.status="resolved_model",f.value=q,null!==d&&(I(f),T(f,d,g)))):g.set(q,new w("resolved_model",d,null,f))}g=n;3===l&&g++;f=q=d=l=0;k.length=0}else{h=new Uint8Array(h.buffer,u,h.byteLength-g);k.push(h);f-=h.byteLength;break}}a._rowState=l;a._rowID=q;a._rowTag=d;a._rowLength=f;return m.read().then(c).catch(e)}}function e(k){N(a,k)}var m=b.getReader();m.read().then(c).catch(e)}var wa={stream:!0},E=new Map,P=new Map,
+-ya=__webpack_require__.u;__webpack_require__.u=function(a){var b=P.get(a);return void 0!==b?b:ya(a)};var xa=y.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,G=Symbol.for("react.element"),R=Symbol.for("react.lazy"),Q=Symbol.iterator,ea=Array.isArray,S=Object.getPrototypeOf,ia=Object.prototype,M=new WeakMap;w.prototype=Object.create(Promise.prototype);w.prototype.then=function(a,b){switch(this.status){case "resolved_model":I(this);break;case "resolved_module":J(this)}switch(this.status){case "fulfilled":a(this.value);
++ya=__bsky_require__.u;__bsky_require__.u=function(a){var b=P.get(a);return void 0!==b?b:ya(a)};var xa=y.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,G=Symbol.for("react.element"),R=Symbol.for("react.lazy"),Q=Symbol.iterator,ea=Array.isArray,S=Object.getPrototypeOf,ia=Object.prototype,M=new WeakMap;w.prototype=Object.create(Promise.prototype);w.prototype.then=function(a,b){switch(this.status){case "resolved_model":I(this);break;case "resolved_module":J(this)}switch(this.status){case "fulfilled":a(this.value);
+ break;case "pending":case "blocked":case "cyclic":a&&(null===this.value&&(this.value=[]),this.value.push(a));b&&(null===this.reason&&(this.reason=[]),this.reason.push(b));break;default:b(this.reason)}};var L=null,v=null;t.createFromFetch=function(a,b){var c=V(b);a.then(function(e){W(c,e.body)},function(e){N(c,e)});return C(c,0)};t.createFromReadableStream=function(a,b){b=V(b);W(b,a);return C(b,0)};t.createServerReference=function(a,b,c){c=function(){var e=Array.prototype.slice.call(arguments);return b(a,
+ e)};ja(c,{id:a,bound:null});return c};t.createTemporaryReferenceSet=function(){return[]};t.encodeReply=function(a,b){return new Promise(function(c,e){ca(a,"",b&&b.temporaryReferences?b.temporaryReferences:void 0,c,e)})}})})();
+diff --git a/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js b/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js
+index f85071d..0fd6534 100644
+--- a/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js
++++ b/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js
+@@ -3298,7 +3298,7 @@
+ 
+   function requireAsyncModule(id) {
+     // We've already loaded all the chunks. We can require the module.
+-    var promise = __webpack_require__(id);
++    var promise = __bsky_require__(id);
+ 
+     if (typeof promise.then !== 'function') {
+       // This wasn't a promise after all.
+@@ -3365,7 +3365,7 @@
+   // Increase priority if necessary.
+ 
+   function requireModule(metadata) {
+-    var moduleExports = __webpack_require__(metadata[ID]);
++    var moduleExports = __bsky_require__(metadata[ID]);
+ 
+     if (isAsyncImport(metadata)) {
+       if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+@@ -3397,9 +3397,9 @@
+    * of chunks that come from Flight and may not be known to the webpack runtime
+    */
+ 
+-  var webpackGetChunkFilename = __webpack_require__.u;
++  var webpackGetChunkFilename = __bsky_require__.u;
+ 
+-  __webpack_require__.u = function (chunkId) {
++  __bsky_require__.u = function (chunkId) {
+     var flightChunk = chunkMap.get(chunkId);
+ 
+     if (flightChunk !== undefined) {
+@@ -3411,7 +3411,7 @@
+ 
+   function loadChunk(chunkId, filename) {
+     chunkMap.set(chunkId, filename);
+-    return __webpack_chunk_load__(chunkId);
++    return __bsky_chunk_load__(chunkId);
+   }
+ 
+   // The server acts as a Client of itself when resolving Server References.
+diff --git a/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js b/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js
+index 88d650b..8ab5d37 100644
+--- a/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js
++++ b/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js
+@@ -39,8 +39,8 @@ function J(a,b,c,e){c={digest:c};b=b.toString(16)+":E"+K(c)+"\n";b=C.encode(b);a
+ h);b.thenableState=za()}else{a.abortableTasks.delete(b);b.status=4;var k=w(a,f);J(a,b.id,k)}}finally{}}function Ia(a){var b=I.H;I.H=vb;var c=l;S=l=a;try{var e=a.pingedTasks;a.pingedTasks=[];for(var d=0;d<e.length;d++)La(a,e[d]);null!==a.destination&&Q(a,a.destination)}catch(g){w(a,g),pa(a,g)}finally{I.H=b,S=null,l=c}}function Q(a,b){r=new Uint8Array(2048);q=0;try{for(var c=a.completedImportChunks,e=0;e<c.length;e++)a.pendingChunks--,V(b,c[e]);c.splice(0,e);var d=a.completedHintChunks;for(e=0;e<d.length;e++)V(b,
+ d[e]);d.splice(0,e);var g=a.completedRegularChunks;for(e=0;e<g.length;e++)a.pendingChunks--,V(b,g[e]);g.splice(0,e);var f=a.completedErrorChunks;for(e=0;e<f.length;e++)a.pendingChunks--,V(b,f[e]);f.splice(0,e)}finally{a.flushScheduled=!1,r&&0<q&&(b.enqueue(new Uint8Array(r.buffer,0,q)),r=null,q=0)}0===a.pendingChunks&&b.close()}function qa(a,b){try{var c=a.abortableTasks;if(0<c.size){a.pendingChunks++;var e=a.nextChunkId++,d=void 0===b?Error("The render was aborted by the server without a reason."):
+ b,g=w(a,d);J(a,e,g,d);c.forEach(function(f){f.status=3;var h=t(e);f=Ja(a,f.id,h);a.completedErrorChunks.push(f)});c.clear()}null!==a.destination&&Q(a,a.destination)}catch(f){w(a,f),pa(a,f)}}function Oa(a,b){var c="",e=a[b];if(e)c=e.name;else{var d=b.lastIndexOf("#");-1!==d&&(c=b.slice(d+1),e=a[b.slice(0,d)]);if(!e)throw Error('Could not find the module "'+b+'" in the React Server Manifest. This is probably a bug in the React Server Components bundler.');}return[e.id,e.chunks,c]}function Pa(a){var b=
+-__webpack_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function wb(){}function Qa(a){for(var b=a[1],c=[],e=0;e<b.length;){var d=b[e++],g=b[e++],f=da.get(d);void 0===f?(Ra.set(d,g),g=__webpack_chunk_load__(d),c.push(g),f=da.set.bind(da,d,null),g.then(f,wb),da.set(d,g)):null!==f&&c.push(f)}return 4===a.length?0===c.length?Pa(a[0]):Promise.all(c).then(function(){return Pa(a[0])}):
+-0<c.length?Promise.all(c):null}function M(a){var b=__webpack_require__(a[0]);if(4===a.length&&"function"===typeof b.then)if("fulfilled"===b.status)b=b.value;else throw b.reason;return"*"===a[2]?b:""===a[2]?b.__esModule?b.default:b:b[a[2]]}function ea(a,b,c,e){this.status=a;this.value=b;this.reason=c;this._response=e}function Sa(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}function Ta(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&Sa(c,b)}}
++__bsky_require__(a);if("function"!==typeof b.then||"fulfilled"===b.status)return null;b.then(function(c){b.status="fulfilled";b.value=c},function(c){b.status="rejected";b.reason=c});return b}function wb(){}function Qa(a){for(var b=a[1],c=[],e=0;e<b.length;){var d=b[e++],g=b[e++],f=da.get(d);void 0===f?(Ra.set(d,g),g=__bsky_chunk_load__(d),c.push(g),f=da.set.bind(da,d,null),g.then(f,wb),da.set(d,g)):null!==f&&c.push(f)}return 4===a.length?0===c.length?Pa(a[0]):Promise.all(c).then(function(){return Pa(a[0])}):
++0<c.length?Promise.all(c):null}function M(a){var b=__bsky_require__(a[0]);if(4===a.length&&"function"===typeof b.then)if("fulfilled"===b.status)b=b.value;else throw b.reason;return"*"===a[2]?b:""===a[2]?b.__esModule?b.default:b:b[a[2]]}function ea(a,b,c,e){this.status=a;this.value=b;this.reason=c;this._response=e}function Sa(a,b){for(var c=0;c<a.length;c++)(0,a[c])(b)}function Ta(a,b){if("pending"===a.status||"blocked"===a.status){var c=a.reason;a.status="rejected";a.reason=b;null!==c&&Sa(c,b)}}
+ function xb(a,b,c,e,d,g){var f=Oa(a._bundlerConfig,b);a=Qa(f);if(c)c=Promise.all([c,a]).then(function(h){h=h[0];var k=M(f);return k.bind.apply(k,[null].concat(h))});else if(a)c=Promise.resolve(a).then(function(){return M(f)});else return M(f);c.then(Ua(e,d,g),Va(e));return null}function ra(a){var b=T,c=x;T=a;x=null;try{var e=JSON.parse(a.value,a._response._fromJSON);null!==x&&0<x.deps?(x.value=e,a.status="blocked",a.value=null,a.reason=null):(a.status="fulfilled",a.value=e)}catch(d){a.status="rejected",
+ a.reason=d}finally{T=b,x=c}}function yb(a,b){a._chunks.forEach(function(c){"pending"===c.status&&Ta(c,b)})}function U(a,b){var c=a._chunks,e=c.get(b);e||(e=a._formData.get(a._prefix+b),e=null!=e?new ea("resolved_model",e,null,a):new ea("pending",null,null,a),c.set(b,e));return e}function Ua(a,b,c){if(x){var e=x;e.deps++}else e=x={deps:1,value:null};return function(d){b[c]=d;e.deps--;0===e.deps&&"blocked"===a.status&&(d=a.value,a.status="fulfilled",a.value=e.value,null!==d&&Sa(d,e.value))}}function Va(a){return function(b){return Ta(a,
+ b)}}function sa(a,b){a=U(a,b);"resolved_model"===a.status&&ra(a);if("fulfilled"!==a.status)throw a.reason;return a.value}function zb(a,b,c,e){if("$"===e[0])switch(e[1]){case "$":return e.slice(1);case "@":return b=parseInt(e.slice(2),16),U(a,b);case "F":return e=parseInt(e.slice(2),16),e=sa(a,e),xb(a,e.id,e.bound,T,b,c);case "T":return gb(e.slice(2));case "Q":return b=parseInt(e.slice(2),16),a=sa(a,b),new Map(a);case "W":return b=parseInt(e.slice(2),16),a=sa(a,b),new Set(a);case "K":b=e.slice(2);
+@@ -58,7 +58,7 @@ Bb=Symbol.for("react.memo_cache_sentinel");Symbol.for("react.postpone");var Ma=S
+ X=null,S=null,na=0,G=null,vb={useMemo:function(a){return a()},useCallback:function(a){return a},useDebugValue:function(){},useDeferredValue:u,useTransition:u,readContext:ia,useContext:ia,useReducer:u,useRef:u,useState:u,useInsertionEffect:u,useLayoutEffect:u,useImperativeHandle:u,useEffect:u,useId:function(){if(null===S)throw Error("useId can only be used while React is rendering");var a=S.identifierCount++;return":"+S.identifierPrefix+"S"+a.toString(32)+":"},useSyncExternalStore:u,useCacheRefresh:function(){return jb},
+ useMemoCache:function(a){for(var b=Array(a),c=0;c<a;c++)b[c]=Bb;return b},use:function(a){if(null!==a&&"object"===typeof a||"function"===typeof a){if("function"===typeof a.then){var b=na;na+=1;null===G&&(G=[]);return ib(G,a,b)}a.$$typeof===ab&&ia()}if(a.$$typeof===F){if(null!=a.value&&a.value.$$typeof===ab)throw Error("Cannot read a Client Context from a Server Component.");throw Error("Cannot use() an already resolved Client Reference.");}throw Error("An unsupported type was passed to use(): "+String(a));
+ }},Da={getCacheForType:function(a){var b=(b=l?l:null)?b.cache:new Map;var c=b.get(a);void 0===c&&(c=a(),b.set(a,c));return c}},ka=Array.isArray,Na=Object.getPrototypeOf,la=Symbol.for("react.client.reference"),bb=cb.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;if(!bb)throw Error('The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.');var I=bb,ub=Object.prototype,K=JSON.stringify,
+-l=null,B=!1,aa={},da=new Map,Ra=new Map,Cb=__webpack_require__.u;__webpack_require__.u=function(a){var b=Ra.get(a);return void 0!==b?b:Cb(a)};ea.prototype=Object.create(Promise.prototype);ea.prototype.then=function(a,b){switch(this.status){case "resolved_model":ra(this)}switch(this.status){case "fulfilled":a(this.value);break;case "pending":case "blocked":a&&(null===this.value&&(this.value=[]),this.value.push(a));b&&(null===this.reason&&(this.reason=[]),this.reason.push(b));break;default:b(this.reason)}};
++l=null,B=!1,aa={},da=new Map,Ra=new Map,Cb=__bsky_require__.u;__bsky_require__.u=function(a){var b=Ra.get(a);return void 0!==b?b:Cb(a)};ea.prototype=Object.create(Promise.prototype);ea.prototype.then=function(a,b){switch(this.status){case "resolved_model":ra(this)}switch(this.status){case "fulfilled":a(this.value);break;case "pending":case "blocked":a&&(null===this.value&&(this.value=[]),this.value.push(a));b&&(null===this.reason&&(this.reason=[]),this.reason.push(b));break;default:b(this.reason)}};
+ var T=null,x=null;p.createClientModuleProxy=function(a){a=E({},a,!1);return new Proxy(a,wa)};p.decodeAction=function(a,b){var c=new FormData,e=null;a.forEach(function(d,g){g.startsWith("$ACTION_")?g.startsWith("$ACTION_REF_")?(d="$ACTION_"+g.slice(12)+":",d=Za(a,b,d),e=Ya(b,d.id,d.bound)):g.startsWith("$ACTION_ID_")&&(d=g.slice(11),e=Ya(b,d,null)):c.append(g,d)});return null===e?null:e.then(function(d){return d.bind(null,c)})};p.decodeFormState=function(a,b,c){var e=b.get("$ACTION_KEY");if("string"!==
+ typeof e)return Promise.resolve(null);var d=null;b.forEach(function(f,h){h.startsWith("$ACTION_REF_")&&(f="$ACTION_"+h.slice(12)+":",d=Za(b,c,f))});if(null===d)return Promise.resolve(null);var g=d.id;return Promise.resolve(d.bound).then(function(f){return null===f?null:[a,e,g,f.length-1]})};p.decodeReply=function(a,b){if("string"===typeof a){var c=new FormData;c.append("0",a);a=c}a=Wa(b,"",a);b=U(a,0);Xa(a);return b};p.registerClientReference=function(a,b,c){return E(a,b+"#"+c,!1)};p.registerServerReference=
+ function(a,b,c){return Object.defineProperties(a,{$$typeof:{value:W},$$id:{value:null===c?b:b+"#"+c,configurable:!0},$$bound:{value:null,configurable:!0},bind:{value:ua,configurable:!0}})};p.renderToReadableStream=function(a,b,c){var e=ob(a,b,c?c.onError:void 0,c?c.identifierPrefix:void 0,c?c.onPostpone:void 0);if(c&&c.signal){var d=c.signal;if(d.aborted)qa(e,d.reason);else{var g=function(){qa(e,d.reason);d.removeEventListener("abort",g)};d.addEventListener("abort",g)}}return new ReadableStream({type:"bytes",

sdui/server/.gitignore

@@ -0,0 +1,15 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/build
+.eslintcache
+
+# misc
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

sdui/server/loader/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

sdui/server/loader/region.js

@@ -0,0 +1,74 @@
+/* global Buffer */
+import {
+  getSource as getSourceImpl,
+  load as reactLoad,
+  resolve,
+  transformSource as reactTransformSource,
+} from 'react-server-dom-webpack/node-loader'
+
+export {resolve}
+
+import babel from '@babel/core'
+
+const babelOptions = {
+  babelrc: false,
+  ignore: [/\/(build|node_modules)\//],
+  plugins: [
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-transform-react-jsx',
+  ],
+  sourceMaps: process.env.NODE_ENV === 'development' ? 'inline' : false,
+}
+
+async function babelLoad(url, context, defaultLoad) {
+  const result = await defaultLoad(url, context, defaultLoad)
+  if (result.format === 'module') {
+    const opt = Object.assign({filename: url}, babelOptions)
+    const newResult = await babel.transformAsync(result.source, opt)
+    if (!newResult) {
+      if (typeof result.source === 'string') {
+        return result
+      }
+      return {
+        source: Buffer.from(result.source).toString('utf8'),
+        format: 'module',
+      }
+    }
+    return {source: newResult.code, format: 'module'}
+  }
+  return defaultLoad(url, context, defaultLoad)
+}
+
+export async function load(url, context, defaultLoad) {
+  return await reactLoad(url, context, (u, c) => {
+    return babelLoad(u, c, defaultLoad)
+  })
+}
+
+async function babelTransformSource(source, context, defaultTransformSource) {
+  const {format} = context
+  if (format === 'module') {
+    const opt = Object.assign({filename: context.url}, babelOptions)
+    const newResult = await babel.transformAsync(source, opt)
+    if (!newResult) {
+      if (typeof source === 'string') {
+        return {source}
+      }
+      return {
+        source: Buffer.from(source).toString('utf8'),
+      }
+    }
+    return {source: newResult.code}
+  }
+  return defaultTransformSource(source, context, defaultTransformSource)
+}
+
+async function transformSourceImpl(source, context, defaultTransformSource) {
+  return await reactTransformSource(source, context, (s, c) => {
+    return babelTransformSource(s, c, defaultTransformSource)
+  })
+}
+
+export const transformSource =
+  process.version < 'v16' ? transformSourceImpl : undefined
+export const getSource = process.version < 'v16' ? getSourceImpl : undefined

sdui/server/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "sdui",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "devEngines": {
+    "node": "20.x || 21.x"
+  },
+  "dependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/register": "^7.24.6",
+    "babel-preset-react-app": "^10.0.1",
+    "body-parser": "^1.20.1",
+    "busboy": "^1.6.0",
+    "compression": "^1.7.4",
+    "nodemon": "^2.0.19",
+    "react": "19.0.0-canary-adb717393-20240411",
+    "react-dom": "19.0.0-canary-adb717393-20240411",
+    "react-server-dom-webpack": "19.0.0-canary-adb717393-20240411",
+    "undici": "^5.20.0"
+  },
+  "scripts": {
+    "dev": "NODE_ENV=development BUILD_PATH=dist nodemon --watch src --watch dist -- --enable-source-maps --experimental-loader ./loader/region.js --conditions=react-server --inspect=127.0.0.1:9229 server/region",
+    "start": "NODE_ENV=production node --experimental-loader ./loader/region.js --conditions=react-server server/region"
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  }
+}

sdui/server/server/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

sdui/server/server/region.js

@@ -0,0 +1,140 @@
+'use strict'
+
+const path = require('path')
+const register = require('react-server-dom-webpack/node-register')
+register()
+const babelRegister = require('@babel/register')
+babelRegister({
+  babelrc: false,
+  ignore: [
+    /\/(build|node_modules)\//,
+    function (file) {
+      // eslint-disable-next-line no-path-concat
+      if ((path.dirname(file) + '/').startsWith(__dirname + '/')) {
+        // Ignore everything in this folder
+        // because it's a mix of CJS and ESM
+        // and working with raw code is easier.
+        return true
+      }
+      return false
+    },
+  ],
+  presets: ['@babel/preset-react'],
+  plugins: ['@babel/transform-modules-commonjs'],
+  sourceMaps: process.env.NODE_ENV === 'development' ? 'inline' : false,
+})
+
+if (typeof fetch === 'undefined') {
+  // Patch fetch for earlier Node versions.
+  global.fetch = require('undici').fetch
+}
+
+const express = require('express')
+const bodyParser = require('body-parser')
+const busboy = require('busboy')
+const app = express()
+const compress = require('compression')
+
+app.use(compress())
+
+app.use((req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*')
+  next()
+})
+
+// Application
+
+const React = require('react')
+
+async function renderApp(res, returnValue, formState) {
+  const {renderToPipeableStream} = await import(
+    'react-server-dom-webpack/server'
+  )
+  // const m = require('../src/App.js');
+  const m = await import('../src/App.js')
+
+  let moduleMap = {}
+  for (let id of Object.keys(await import('../src/client.js'))) {
+    moduleMap[id] = {
+      id,
+      name: 'default',
+      chunks: ['main'],
+    }
+  }
+
+  const App = m.default.default || m.default
+  const root = React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(App),
+  )
+  // For client-invoked server actions we refresh the tree and return a return value.
+  const payload = {root, returnValue, formState}
+  const {pipe} = renderToPipeableStream(payload, moduleMap)
+  pipe(res)
+}
+
+app.get('/', async function (req, res) {
+  await renderApp(res, null, null)
+})
+
+app.post('/', bodyParser.text(), async function (req, res) {
+  const {decodeReply, decodeReplyFromBusboy} = await import(
+    'react-server-dom-webpack/server'
+  )
+  const serverReference = req.get('rsc-action')
+  if (serverReference) {
+    // This is the client-side case
+    const [filepath, name] = serverReference.split('#')
+    const action = (await import(filepath))[name]
+    // Validate that this is actually a function we intended to expose and
+    // not the client trying to invoke arbitrary functions. In a real app,
+    // you'd have a manifest verifying this before even importing it.
+    if (action.$$typeof !== Symbol.for('react.server.reference')) {
+      throw new Error('Invalid action')
+    }
+
+    let args
+    if (req.is('multipart/form-data')) {
+      // Use busboy to streamingly parse the reply from form-data.
+      const bb = busboy({headers: req.headers})
+      const reply = decodeReplyFromBusboy(bb)
+      req.pipe(bb)
+      args = await reply
+    } else {
+      args = await decodeReply(req.body)
+    }
+    const result = action.apply(null, args)
+    try {
+      // Wait for any mutations
+      await result
+    } catch (x) {
+      // We handle the error on the client
+    }
+    // Refresh the client and return the value
+    renderApp(res, result, null)
+  }
+})
+
+app.listen(3001, () => {
+  console.log('Regional Flight Server listening on port 3001...')
+})
+
+app.on('error', function (error) {
+  if (error.syscall !== 'listen') {
+    throw error
+  }
+
+  switch (error.code) {
+    case 'EACCES':
+      console.error('port 3001 requires elevated privileges')
+      process.exit(1)
+      break
+    case 'EADDRINUSE':
+      console.error('Port 3001 is already in use')
+      process.exit(1)
+      break
+    default:
+      throw error
+  }
+})

sdui/server/src/App.js

@@ -0,0 +1,127 @@
+import * as React from 'react'
+
+import {
+  ActorLabel,
+  Avatar,
+  Box,
+  Embed,
+  Expandable,
+  Label,
+  Stack,
+  Tabs,
+} from './client.js'
+
+export default async function App() {
+  return (
+    <Stack gap={10}>
+      <Label size={36} lineHeight={1.2} weight="bold" text="Hello, world!" />
+      <Label
+        lineHeight={1.2}
+        text='This is a weekend exploration of an approach to a feature called "application components."'
+      />
+      <Tabs labels={['Layout', 'Display', 'Inputs', 'Forms', 'Embeds']}>
+        <Stack gap={10} pad={{t: 20}}>
+          <Box pad={{x: 10}}>
+            <Label text="Stack" size={10} weight="bold" />
+          </Box>
+          <Box border="default" corner={10} pad={{x: 2, y: 6}}>
+            <Stack direction="row" align="center" gap={10} pad={{x: 10}}>
+              <Label text="One" />
+              <Label text="Two" color="positive" />
+              <Box border="default" corner={4} pad={10}>
+                <Label text="Three" />
+              </Box>
+              <Box background="secondary" corner={4} pad={10}>
+                <Label text="Four" />
+              </Box>
+              <Label text="Five" color="secondary" />
+            </Stack>
+          </Box>
+          <Box pad={{x: 10}}>
+            <Label text="Box" size={10} weight="bold" />
+          </Box>
+          <Box border="default" corner={10} pad={{x: 10, y: 14}}>
+            <Label text="You can use the Box element as somewhat similar to a div." />
+            <Label text="Its children flow vertically with no gap." />
+            <Label text="What it offers is styling -- border, corner radius, background, and padding." />
+            <Label text="If you want to control layout then you use a Stack, then if you want styling you use a Box." />
+            <Label text="Boxes also make good neutral containers." />
+          </Box>
+          <Box pad={{x: 10}}>
+            <Label text="Expandable" size={10} weight="bold" />
+          </Box>
+          <Box border="default" corner={10} pad={6}>
+            <Expandable label="Expandable">
+              <Label text="Content" />
+            </Expandable>
+          </Box>
+        </Stack>
+        <Label text="Display TODO" />
+        <Label text="Inputs TODO" />
+        <Label text="Forms TODO" />
+        <Stack gap={10} pad={{t: 20}}>
+          <Box pad={{x: 10}}>
+            <Label text="Avatar" size={10} weight="bold" />
+          </Box>
+          <Box border="secondary" corner={8} pad={{x: 16, y: 12}}>
+            <Stack direction="row" gap={10}>
+              <Avatar uri="bsky.app" />
+              <Avatar uri="at://atproto.com" />
+              <Avatar uri="at://pfrazee.com/" />
+            </Stack>
+          </Box>
+          <Box pad={{x: 10}}>
+            <Label text="ActorLabel" size={10} weight="bold" />
+          </Box>
+          <Box border="secondary" corner={8} pad={{x: 16, y: 12}}>
+            <Stack gap={10}>
+              <Stack direction="row" gap={8}>
+                <Label weight="bold" text="Display Name:" />
+                <ActorLabel uri="bsky.app" field="displayName" />
+              </Stack>
+              <Stack direction="row" gap={8}>
+                <Label weight="bold" text="Handle:" />
+                <ActorLabel uri="bsky.app" field="handle" />
+              </Stack>
+              <Stack direction="row" gap={8}>
+                <Label weight="bold" text="Description:" />
+                <ActorLabel uri="bsky.app" field="description" />
+              </Stack>
+            </Stack>
+          </Box>
+          <Box pad={{x: 10}}>
+            <Label text="Embed (Actor)" size={10} weight="bold" />
+          </Box>
+          <Box border="secondary" corner={8}>
+            <Embed uri="bsky.app" />
+          </Box>
+          <Box border="secondary" corner={8}>
+            <Embed uri="at://atproto.com/" />
+          </Box>
+          <Box border="secondary" corner={8}>
+            <Embed uri="at://pfrazee.com" />
+          </Box>
+          <Box pad={{x: 10}}>
+            <Label text="Embed (Post)" size={10} weight="bold" />
+          </Box>
+          <Box border="secondary" corner={8}>
+            <Embed uri="at://pfrazee.com/app.bsky.feed.post/3ku7fbojcqs25" />
+          </Box>
+          <Box border="secondary" corner={8}>
+            <Embed uri="at://bsky.app/app.bsky.feed.post/3ku73zs755e27" />
+          </Box>
+          <Box pad={{x: 10}}>
+            <Label
+              text="Embed (Unsupported record type)"
+              size={10}
+              weight="bold"
+            />
+          </Box>
+          <Box border="secondary" corner={8}>
+            <Embed uri="at://pfrazee.com/com.example.unknown/123" />
+          </Box>
+        </Stack>
+      </Tabs>
+    </Stack>
+  )
+}

sdui/server/src/client.js

@@ -0,0 +1,16 @@
+export const Text = createClientReference('Text')
+export const ActorLabel = createClientReference('ActorLabel')
+export const Avatar = createClientReference('Avatar')
+export const Box = createClientReference('Box')
+export const Embed = createClientReference('Embed')
+export const Expandable = createClientReference('Expandable')
+export const Label = createClientReference('Label')
+export const Stack = createClientReference('Stack')
+export const Tabs = createClientReference('Tabs')
+
+function createClientReference(id) {
+  return {
+    $$typeof: Symbol.for('react.client.reference'),
+    $$id: id,
+  }
+}

src/Navigation.tsx

@@ -65,6 +65,7 @@ import {
 import {AccessibilitySettingsScreen} from './view/screens/AccessibilitySettings'
 import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
 import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
+import {DebugAppcomScreen} from './view/screens/DebugAppcom'
 import {DebugModScreen} from './view/screens/DebugMod'
 import {FeedsScreen} from './view/screens/Feeds'
 import {HomeScreen} from './view/screens/Home'
@@ -233,6 +234,11 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => DebugModScreen}
         options={{title: title(msg`Moderation states`), requireAuth: true}}
       />
+      <Stack.Screen
+        name="DebugAppcom"
+        getComponent={() => DebugAppcomScreen}
+        options={{title: title(msg`Application components`), requireAuth: true}}
+      />
       <Stack.Screen
         name="Log"
         getComponent={() => LogScreen}

src/components/appcom/AppCom.tsx

@@ -0,0 +1,54 @@
+import './vocabulary'
+
+import React from 'react'
+import {View} from 'react-native'
+import {ErrorBoundary} from 'react-error-boundary'
+import {ZodError} from 'zod'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import {AppComponent} from './AppComponent'
+
+export function AppComponentRegion({origin}: {origin: string}) {
+  const t = useTheme()
+  return (
+    <View style={[a.border, t.atoms.border_contrast_medium, a.rounded_sm]}>
+      <View
+        style={[
+          t.atoms.bg_contrast_25,
+          a.px_md,
+          a.py_sm,
+          {
+            borderTopLeftRadius: a.rounded_sm.borderRadius,
+            borderTopRightRadius: a.rounded_sm.borderRadius,
+          },
+        ]}>
+        <Text
+          style={[
+            t.atoms.text_contrast_medium,
+            a.text_xs,
+            {fontFamily: 'monospace'},
+          ]}>
+          {origin}
+        </Text>
+      </View>
+      <View style={[a.px_md, a.py_lg]}>
+        <ErrorBoundary fallbackRender={fallbackRender}>
+          <AppComponent origin={origin} />
+        </ErrorBoundary>
+      </View>
+    </View>
+  )
+}
+
+function fallbackRender({error}: {error: Error}) {
+  const msg =
+    error instanceof ZodError
+      ? `${error.issues[0].path.join('.')}: ${error.issues[0].message}`
+      : error.toString()
+  return (
+    <View>
+      <Text>{msg}</Text>
+    </View>
+  )
+}

src/components/appcom/AppComponent.tsx

@@ -0,0 +1,32 @@
+import React, {Suspense} from 'react'
+import {useQuery} from '@tanstack/react-query'
+// @ts-ignore
+import {createFromFetch} from 'react-server-dom-webpack/client'
+
+import {STALE} from 'state/queries'
+import {fetch} from './fetch'
+
+export function AppComponent({origin}: {origin: string}) {
+  const {data} = useQuery({
+    queryKey: ['sdui', origin],
+    queryFn: async () => {
+      const {root} = await createFromFetch(
+        fetch(origin, {
+          // @ts-ignore
+          reactNative: {textStreaming: true},
+          headers: {
+            Accept: 'text/x-component',
+          },
+        }),
+      )
+      return {root}
+    },
+    staleTime: STALE.INFINITY,
+  })
+
+  if (!data) {
+    return null // TODO
+  }
+
+  return <Suspense fallback={null /* TODO */}>{data.root}</Suspense>
+}

src/components/appcom/fetch.js

@@ -0,0 +1 @@
+export const fetch = window.fetch

src/components/appcom/fetch.native.js

@@ -0,0 +1,2 @@
+// @ts-ignore
+export {fetch} from 'react-native-fetch-api'

src/components/appcom/modules.js

@@ -0,0 +1,21 @@
+/* global __bsky_require__ */
+/* global __bsky_chunk_load__ */
+
+const map = new Map()
+
+export function register(id, moduleExport) {
+  map.set(id, {default: moduleExport})
+}
+
+global.__bsky_require__ = function (id) {
+  return map.get(id)
+}
+global.__bsky_require__.u = function () {}
+
+global.__bsky_chunk_load__ = function () {
+  return {
+    then(cb) {
+      cb()
+    },
+  }
+}

src/components/appcom/types.ts

@@ -0,0 +1,6 @@
+export interface AppComNode {
+  type: string
+  key?: string
+  props?: Record<string, any>
+  children?: Array<AppComNode>
+}

src/components/appcom/vocabulary/ActorLabel.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import {AtUri} from '@atproto/api'
+import {z} from 'zod'
+
+import {useProfileQuery} from '#/state/queries/profile'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
+import {color} from './common'
+import {Label} from './Label'
+
+const actorLabelProps = z.object({
+  uri: z.string(),
+  field: z.enum(['handle', 'displayName', 'description']),
+  color,
+  size: z
+    .number()
+    .positive()
+    .default(16)
+    .transform(v => ({fontSize: v})),
+  lineHeight: z
+    .number()
+    .positive()
+    .default(1)
+    .transform(v => ({lineHeight: v})),
+  weight: z
+    .enum(['normal', 'semibold', 'bold'])
+    .default('normal')
+    .transform(v => ({fontWeight: v})),
+})
+
+export type ActorLabelProps = z.infer<typeof actorLabelProps>
+
+export function ActorLabel(props: React.PropsWithChildren<ActorLabelProps>) {
+  const propsParsed = actorLabelProps.parse(props)
+  const urip = new AtUri(propsParsed.uri)
+
+  const {data: did} = useResolveDidQuery(urip.host)
+  const {data: profile} = useProfileQuery({did})
+
+  let text = ''
+  if (profile) {
+    if (props.field === 'handle') {
+      text = profile.handle
+    }
+    if (props.field === 'displayName') {
+      text = profile.displayName || profile.handle
+    }
+    if (props.field === 'description') {
+      text = profile.description || ''
+    }
+  }
+
+  // TODO loading, error
+  return <Label {...props} text={text} />
+}

src/components/appcom/vocabulary/Avatar.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import {AtUri} from '@atproto/api'
+import {z} from 'zod'
+
+import {useProfileQuery} from '#/state/queries/profile'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+
+const avatarProps = z.object({
+  uri: z.string(),
+  size: z.number().default(50),
+})
+
+export type AvatarProps = z.infer<typeof avatarProps>
+
+export function Avatar(props: React.PropsWithChildren<AvatarProps>) {
+  const propsParsed = avatarProps.parse(props)
+  const urip = new AtUri(propsParsed.uri)
+
+  const {data: did} = useResolveDidQuery(urip.host)
+  const {data: profile} = useProfileQuery({did})
+
+  return <UserAvatar avatar={profile?.avatar} size={propsParsed.size} />
+}

src/components/appcom/vocabulary/Box.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {View} from 'react-native'
+import {z} from 'zod'
+
+import {pad} from './common'
+import {useBackgroundColor, useBorderColor} from './hooks'
+
+const boxProps = z.object({
+  pad,
+
+  corner: z
+    .union([
+      z
+        .number()
+        .positive()
+        .transform(v => ({borderRadius: v})),
+      z
+        .object({
+          tl: z.number().positive().optional(),
+          tr: z.number().positive().optional(),
+          bl: z.number().positive().optional(),
+          br: z.number().positive().optional(),
+        })
+        .transform(obj => ({
+          borderTopLeftRadius: obj.tl,
+          borderTopRightRadius: obj.tr,
+          borderBottomLeftRadius: obj.bl,
+          borderBottomRightRadius: obj.br,
+        })),
+    ])
+    .optional(),
+
+  background: z
+    .enum([
+      'default',
+      'primary',
+      'secondary',
+      'positive',
+      'negative',
+      'inverted',
+      'none',
+    ])
+    .optional(),
+
+  border: z
+    .enum([
+      'default',
+      'primary',
+      'secondary',
+      'positive',
+      'negative',
+      'inverted',
+      'none',
+    ])
+    .optional(),
+})
+
+export type BoxProps = z.infer<typeof boxProps>
+
+export function Box(props: React.PropsWithChildren<BoxProps>) {
+  const styles = boxProps.parse(props)
+
+  const backgroundColor = useBackgroundColor(styles.background)
+  const borderColor = useBorderColor(styles.border)
+
+  return (
+    <View style={[styles.pad, styles.corner, backgroundColor, borderColor]}>
+      {props.children}
+    </View>
+  )
+}

src/components/appcom/vocabulary/Embed.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AtUri} from '@atproto/api'
+import {z} from 'zod'
+
+import {usePostQuery} from '#/state/queries/post'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
+import {Post as PostInner} from '#/view/com/post/Post'
+import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
+import {Text} from '#/components/Typography'
+
+const embedProps = z.object({
+  uri: z.string(),
+})
+
+export type EmbedProps = z.infer<typeof embedProps>
+
+export function Embed(props: React.PropsWithChildren<EmbedProps>) {
+  const propsParsed = embedProps.parse(props)
+  const urip = new AtUri(propsParsed.uri)
+
+  if (!urip.pathname || urip.pathname === '/') {
+    return <Actor actor={urip.host} />
+  }
+  if (urip.collection === 'app.bsky.feed.post') {
+    return <Post uri={urip.toString()} />
+  }
+  return <Unknown urip={urip} />
+}
+
+function Actor({actor}: {actor: string}) {
+  const {data: did} = useResolveDidQuery(actor)
+  const {data: profile} = useProfileQuery({did})
+
+  if (profile) {
+    return <ProfileCardWithFollowBtn noBg noBorder profile={profile} />
+  }
+  // TODO error, loading
+  return <View />
+}
+
+function Post({uri}: {uri: string}) {
+  const {data: post} = usePostQuery(uri)
+  if (post) {
+    return <PostInner post={post} hideTopBorder />
+  }
+  // TODO error, loading
+  return <View />
+}
+
+function Unknown({urip}: {urip: AtUri}) {
+  return (
+    <View style={{paddingVertical: 10, paddingHorizontal: 15}}>
+      <Text>Unsupported record type: {urip.collection}</Text>
+    </View>
+  )
+}

src/components/appcom/vocabulary/Expandable.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {View} from 'react-native'
+import {z} from 'zod'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
+import {
+  ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottom,
+  ChevronRight_Stroke2_Corner0_Rounded as ChevronRight,
+} from '#/components/icons/Chevron'
+import {Text} from '#/components/Typography'
+
+const expandableProps = z.object({
+  label: z.string(),
+  defaultExpanded: z.boolean().default(false),
+})
+
+export type ExpandableProps = z.infer<typeof expandableProps>
+
+export function Expandable(props: React.PropsWithChildren<ExpandableProps>) {
+  const t = useTheme()
+
+  const propsParsed = expandableProps.parse(props)
+  const [expanded, setExpanded] = React.useState(propsParsed.defaultExpanded)
+
+  return (
+    <View>
+      <Button onPress={() => setExpanded(v => !v)} label={propsParsed.label}>
+        {({hovered}) => (
+          <View
+            style={[
+              a.flex_1,
+              a.flex_row,
+              a.align_center,
+              a.gap_sm,
+              a.px_md,
+              a.py_md,
+              a.rounded_xs,
+              hovered && t.atoms.bg_contrast_25,
+            ]}>
+            {expanded ? (
+              <ChevronBottom
+                width={14}
+                fill={t.atoms.text_contrast_low.color}
+              />
+            ) : (
+              <ChevronRight width={14} fill={t.atoms.text_contrast_low.color} />
+            )}
+            <Text style={[t.atoms.text, a.text_md]}>{props.label}</Text>
+          </View>
+        )}
+      </Button>
+      <View style={{display: expanded ? 'flex' : 'none'}}>
+        {props.children}
+      </View>
+    </View>
+  )
+}

src/components/appcom/vocabulary/Label.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import {z} from 'zod'
+
+import {Text} from '#/components/Typography'
+import {color} from './common'
+import {useFontColor} from './hooks'
+
+export const labelProps = z.object({
+  text: z.string(),
+  color,
+  size: z
+    .number()
+    .positive()
+    .default(16)
+    .transform(v => ({fontSize: v})),
+  lineHeight: z
+    .number()
+    .positive()
+    .default(1)
+    .transform(v => ({lineHeight: v})),
+  weight: z
+    .enum(['normal', 'semibold', 'bold'])
+    .default('normal')
+    .transform(v => ({fontWeight: v})),
+})
+
+export type LabelProps = z.infer<typeof labelProps>
+
+export function Label(props: React.PropsWithChildren<LabelProps>) {
+  const styles = labelProps.parse(props)
+  const fontColor = useFontColor(styles.color)
+  return (
+    <Text style={[fontColor, styles.size, styles.lineHeight, styles.weight]}>
+      {props.text}
+    </Text>
+  )
+}

src/components/appcom/vocabulary/Stack.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import {FlexAlignType, FlexStyle, View} from 'react-native'
+import {z} from 'zod'
+
+import {gap, pad} from './common'
+
+const stackProps = z.object({
+  gap,
+  pad,
+
+  direction: z
+    .enum(['row', 'column'])
+    .default('column')
+    .transform(v => ({flexDirection: v})),
+
+  align: z
+    .enum(['start', 'center', 'end', 'stretch'])
+    .default('stretch')
+    .transform(v => {
+      if (v === 'start') {
+        return {alignItems: 'flex-start' as FlexAlignType}
+      }
+      if (v === 'end') {
+        return {alignItems: 'flex-end' as FlexAlignType}
+      }
+      return {alignItems: v as FlexAlignType}
+    }),
+
+  justify: z
+    .enum([
+      'start',
+      'center',
+      'end',
+      'space-between',
+      'space-around',
+      'space-evenly',
+    ])
+    .default('start')
+    .transform(v => {
+      if (v === 'start') {
+        return {justifyContent: 'flex-start' as FlexStyle['justifyContent']}
+      }
+      if (v === 'end') {
+        return {justifyContent: 'flex-end' as FlexStyle['justifyContent']}
+      }
+      return {justifyContent: v as FlexStyle['justifyContent']}
+    }),
+})
+
+export type StackProps = z.infer<typeof stackProps>
+
+export function Stack(props: React.PropsWithChildren<StackProps>) {
+  const styles = stackProps.parse(props)
+  return (
+    <View
+      style={[
+        {flexWrap: 'nowrap'},
+        styles.direction,
+        styles.align,
+        styles.justify,
+        styles.gap,
+        styles.pad,
+      ]}>
+      {props.children}
+    </View>
+  )
+}

src/components/appcom/vocabulary/Tabs.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import {View} from 'react-native'
+import {z} from 'zod'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
+import {Text} from '#/components/Typography'
+
+const tabsProps = z.object({
+  labels: z.array(z.string()),
+})
+
+export type TabsProps = z.infer<typeof tabsProps>
+
+export function Tabs(props: React.PropsWithChildren<TabsProps>) {
+  const t = useTheme()
+
+  const [selected, setSelected] = React.useState(0)
+  const propsParsed = tabsProps.parse(props)
+
+  return (
+    <View>
+      <View style={[a.flex_row]}>
+        {propsParsed.labels.map((label, i) => (
+          <Button
+            key={`${i}-${label}`}
+            onPress={() => setSelected(i)}
+            label={label}>
+            {({hovered}) => (
+              <View
+                style={[
+                  a.px_lg,
+                  a.py_md,
+                  a.border_b,
+                  hovered && t.atoms.bg_contrast_25,
+                  {
+                    borderColor:
+                      hovered || selected === i
+                        ? t.palette.black
+                        : 'transparent',
+                  },
+                ]}>
+                <Text style={[t.atoms.text, a.text_md]}>{label}</Text>
+              </View>
+            )}
+          </Button>
+        ))}
+      </View>
+      {arr(props.children).map((child, i) => (
+        <View
+          key={`tab-content-${i}`}
+          style={{display: i === selected ? 'flex' : 'none'}}>
+          {child}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+function arr(v: any): Array<any> {
+  if (Array.isArray(v)) {
+    return v
+  }
+  if (!v) {
+    return []
+  }
+  return [v]
+}

src/components/appcom/vocabulary/common.ts

@@ -0,0 +1,36 @@
+import {z} from 'zod'
+
+export const gap = z
+  .number()
+  .optional()
+  .transform(v => ({gap: v}))
+
+export const pad = z
+  .union([
+    z
+      .number()
+      .positive()
+      .transform(v => ({padding: v})),
+    z
+      .object({
+        x: z.number().positive().optional(),
+        y: z.number().positive().optional(),
+        t: z.number().positive().optional(),
+        b: z.number().positive().optional(),
+        l: z.number().positive().optional(),
+        r: z.number().positive().optional(),
+      })
+      .transform(obj => ({
+        paddingHorizontal: obj.x,
+        paddingVertical: obj.y,
+        paddingTop: obj.t,
+        paddingBottom: obj.b,
+        paddingLeft: obj.l,
+        paddingRight: obj.r,
+      })),
+  ])
+  .optional()
+
+export const color = z
+  .enum(['default', 'primary', 'secondary', 'positive', 'negative', 'inverted'])
+  .default('default')

src/components/appcom/vocabulary/hooks.ts

@@ -0,0 +1,66 @@
+import {useTheme} from '#/alf'
+
+export function useBackgroundColor(value: string | undefined) {
+  const t = useTheme()
+
+  let background
+  if (value === 'default') {
+    background = t.atoms.bg
+  } else if (value === 'primary') {
+    background = {backgroundColor: t.palette.primary_500}
+  } else if (value === 'secondary') {
+    background = t.atoms.bg_contrast_100
+  } else if (value === 'positive') {
+    background = {backgroundColor: t.palette.positive_500}
+  } else if (value === 'negative') {
+    background = {backgroundColor: t.palette.negative_500}
+  } else if (value === 'inverted') {
+    background = t.atoms.bg_contrast_950
+  }
+  return background
+}
+
+export function useBorderColor(value: string | undefined) {
+  const t = useTheme()
+
+  let borderColor
+  if (value === 'default') {
+    borderColor = {
+      borderWidth: 1,
+      borderColor: t.atoms.border_contrast_medium.borderColor,
+    }
+  } else if (value === 'primary') {
+    borderColor = {borderWidth: 1, borderColor: t.palette.primary_500}
+  } else if (value === 'secondary') {
+    borderColor = {
+      borderWidth: 1,
+      borderColor: t.atoms.border_contrast_low.borderColor,
+    }
+  } else if (value === 'positive') {
+    borderColor = {borderWidth: 1, borderColor: t.palette.positive_500}
+  } else if (value === 'negative') {
+    borderColor = {borderWidth: 1, borderColor: t.palette.negative_500}
+  }
+
+  return borderColor
+}
+
+export function useFontColor(value: string | undefined) {
+  const t = useTheme()
+
+  let fontColor
+  if (value === 'default') {
+    fontColor = t.atoms.text
+  } else if (value === 'primary') {
+    fontColor = {color: t.palette.primary_500}
+  } else if (value === 'secondary') {
+    fontColor = t.atoms.text_contrast_medium
+  } else if (value === 'positive') {
+    fontColor = {color: t.palette.positive_500}
+  } else if (value === 'negative') {
+    fontColor = {color: t.palette.negative_500}
+  } else if (value === 'inverted') {
+    fontColor = {color: t.atoms.bg.backgroundColor}
+  }
+  return fontColor
+}

src/components/appcom/vocabulary/index.tsx

@@ -0,0 +1,20 @@
+import {Text} from '#/components/Typography'
+import {register} from '../modules'
+import {ActorLabel} from './ActorLabel'
+import {Avatar} from './Avatar'
+import {Box} from './Box'
+import {Embed} from './Embed'
+import {Expandable} from './Expandable'
+import {Label} from './Label'
+import {Stack} from './Stack'
+import {Tabs} from './Tabs'
+
+register('Text', Text)
+register('ActorLabel', ActorLabel)
+register('Avatar', Avatar)
+register('Box', Box)
+register('Embed', Embed)
+register('Expandable', Expandable)
+register('Label', Label)
+register('Stack', Stack)
+register('Tabs', Tabs)

src/lib/routes/types.ts

@@ -25,6 +25,7 @@ export type CommonNavigatorParams = {
   ProfileLabelerLikedBy: {name: string}
   Debug: undefined
   DebugMod: undefined
+  DebugAppcom: undefined
   Log: undefined
   Support: undefined
   PrivacyPolicy: undefined

src/platform/polyfills.ts

@@ -53,3 +53,5 @@ globalThis.atob = (str: string): string => {
   }
   return result
 }
+
+import 'web-streams-polyfill/dist/polyfill'

src/routes.ts

@@ -25,6 +25,7 @@ export const router = new Router({
   ProfileLabelerLikedBy: '/profile/:name/labeler/liked-by',
   Debug: '/sys/debug',
   DebugMod: '/sys/debug-mod',
+  DebugAppcom: '/sys/debug-appcom',
   Log: '/sys/log',
   AppPasswords: '/settings/app-passwords',
   PreferencesFollowingFeed: '/settings/following-feed',

src/view/screens/DebugAppcom.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
+import {CenteredView, ScrollView} from '#/view/com/util/Views'
+import {atoms as a, useTheme} from '#/alf'
+import {AppComponentRegion} from '#/components/appcom/AppCom'
+import {Text} from '#/components/Typography'
+
+export const DebugAppcomScreen = ({}: NativeStackScreenProps<
+  CommonNavigatorParams,
+  'DebugAppcom'
+>) => {
+  const t = useTheme()
+  const error = '' // TODO
+
+  return (
+    <ScrollView>
+      <CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}>
+        <Text style={[a.text_5xl, a.font_bold, a.pb_lg]}>
+          Application components
+        </Text>
+
+        {error && (
+          <View
+            style={[
+              {backgroundColor: t.palette.negative_500},
+              a.px_lg,
+              a.py_md,
+              a.rounded_sm,
+            ]}>
+            <Text style={{color: '#fff'}}>{error}</Text>
+          </View>
+        )}
+
+        <View style={{height: 40}} />
+
+        <AppComponentRegion origin="http://localhost:3001" />
+      </CenteredView>
+    </ScrollView>
+  )
+}

src/view/screens/Settings/index.tsx

@@ -288,6 +288,10 @@ export function SettingsScreen({}: Props) {
     navigation.navigate('DebugMod')
   }, [navigation])
 
+  const onPressDebugAppcom = React.useCallback(() => {
+    navigation.navigate('DebugAppcom')
+  }, [navigation])
+
   const onPressSavedFeeds = React.useCallback(() => {
     navigation.navigate('SavedFeeds')
   }, [navigation])
@@ -874,6 +878,16 @@ export function SettingsScreen({}: Props) {
                 <Trans>Debug Moderation</Trans>
               </Text>
             </TouchableOpacity>
+            <TouchableOpacity
+              style={[pal.view, styles.linkCardNoIcon]}
+              onPress={onPressDebugAppcom}
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`Open storybook page`)}
+              accessibilityHint={_(msg`Opens the storybook page`)}>
+              <Text type="lg" style={pal.text}>
+                <Trans>Debug Appcom</Trans>
+              </Text>
+            </TouchableOpacity>
             <TouchableOpacity
               style={[pal.view, styles.linkCardNoIcon]}
               onPress={onPressResetPreferences}

yarn.lock

@@ -8613,6 +8613,13 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-loose@^8.3.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/acorn-loose/-/acorn-loose-8.4.0.tgz#26d3e219756d1e180d006f5bcc8d261a28530f55"
+  integrity sha512-M0EUka6rb+QC4l9Z3T0nJEzNOO7JcoJlYMrBlyBCiFSXRyxjLKayd4TbQs2FDRWQU1h9FR7QVNHt+PEaoNL5rQ==
+  dependencies:
+    acorn "^8.11.0"
+
 acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
@@ -8643,6 +8650,11 @@ acorn@^8.1.0, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.7.1, acorn@^8.8.1, acorn@^8.8
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
 
+acorn@^8.11.0:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
 address@^1.0.1, address@^1.1.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
@@ -16705,7 +16717,7 @@ negotiator@0.6.3:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
-neo-async@^2.5.0, neo-async@^2.6.2:
+neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@@ -17167,6 +17179,11 @@ osenv@^0.1.5:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+p-defer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-3.0.0.tgz#d1dceb4ee9b2b604b1d94ffec83760175d4e6f83"
+  integrity sha512-ugZxsxmtTln604yeYd29EGrNhazN2lywetzpKhfmQjW/VJmhpDmWbiX+h0zL8V91R0UXkhb3KtPmyq9PZw3aYw==
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -18820,6 +18837,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-error-boundary@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz#80386b7b27b1131c5fbb7368b8c0d983354c7947"
+  integrity sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-error-overlay@^6.0.11:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
@@ -18876,6 +18900,13 @@ react-native-drawer-layout@^4.0.0-alpha.3:
   dependencies:
     use-latest-callback "^0.1.9"
 
+react-native-fetch-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-fetch-api/-/react-native-fetch-api-3.0.0.tgz#81e1bb6562c292521bc4eca52fe1097f4c1ebab5"
+  integrity sha512-g2rtqPjdroaboDKTsJCTlcmtw54E25OjyaunUP0anOZn4Fuo2IKs8BVfe02zVggA/UysbmfSnRJIqtNkAgggNA==
+  dependencies:
+    p-defer "^3.0.0"
+
 react-native-fs@^2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.20.0.tgz#05a9362b473bfc0910772c0acbb73a78dbc810f6"
@@ -19192,6 +19223,14 @@ react-scripts@^5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-server-dom-webpack@19.0.0-canary-adb717393-20240411:
+  version "19.0.0-canary-adb717393-20240411"
+  resolved "https://registry.yarnpkg.com/react-server-dom-webpack/-/react-server-dom-webpack-19.0.0-canary-adb717393-20240411.tgz#49256e2d83378e2a39be5074f3d4bb7d5bb6a4dc"
+  integrity sha512-qbOEljTas1QIUGQsiwn1TvCeaAjZiiarmHJQjCXMpDI2uliURhbDalzquR4M5/gWw2m79iWKcnumA7azz4UZDg==
+  dependencies:
+    acorn-loose "^8.3.0"
+    neo-async "^2.6.1"
+
 react-shallow-renderer@^16.15.0:
   version "16.15.0"
   resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
@@ -21796,6 +21835,11 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-streams-polyfill@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.1.1.tgz#1516f2d4ea8f1bdbfed15eb65cb2df87098c8364"
+  integrity sha512-Czi3fG883e96T4DLEPRvufrF2ydhOOW1+1a6c3gNjH2aIh50DNFBdfwh2AKoOf1rXvpvavAoA11Qdq9+BKjE0Q==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"