Make addMember and removeMember take loaded Accounts instead of just IDs

Performance improvements & Twit example improvements

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/workflows/build-and-deploy.yaml

@@ -7,11 +7,12 @@ on:
     branches: [ "main" ]
 
 jobs:
-  build:
+  build-examples:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        example: ["todo", "pets", "twit"]
+        # example: ["chat", "todo", "pets", "twit", "file-drop"]
+        example: ["twit", "chat"]
 
     steps:
     - uses: actions/checkout@v3
@@ -53,12 +54,40 @@ jobs:
         cache-from: type=gha
         cache-to: type=gha,mode=max
 
-  deploy:
+  # build-homepage:
+  #   runs-on: ubuntu-latest
+
+  #   steps:
+  #   - uses: actions/checkout@v3
+  #     with:
+  #       submodules: true
+
+  #   - name: Set up Docker Buildx
+  #     uses: docker/setup-buildx-action@v2
+
+  #   - name: Login to GitHub Container Registry
+  #     uses: docker/login-action@v2
+  #     with:
+  #       registry: ghcr.io
+  #       username: gardencmp
+  #       password: ${{ secrets.GITHUB_TOKEN }}
+
+  #   - name: Docker Build & Push
+  #     uses: docker/build-push-action@v4
+  #     with:
+  #       context: ./homepage/homepage-jazz
+  #       push: true
+  #       tags: ghcr.io/gardencmp/${{github.event.repository.name}}-homepage-jazz:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}}
+  #       cache-from: type=gha
+  #       cache-to: type=gha,mode=max
+
+  deploy-examples:
     runs-on: ubuntu-latest
-    needs: build
+    needs: build-examples
     strategy:
       matrix:
-        example: ["todo", "pets", "twit"]
+        # example: ["chat", "todo", "pets", "twit", "file-drop"]
+        example: ["twit", "chat"]
 
     steps:
     - uses: actions/checkout@v3
@@ -87,4 +116,37 @@ jobs:
         envsubst '${DOCKER_USER} ${DOCKER_PASSWORD} ${DOCKER_TAG} ${BRANCH_SUFFIX} ${BRANCH_SUBDOMAIN}' < job-template.nomad > job-instance.nomad;
         cat job-instance.nomad;
         NOMAD_ADDR='http://control1v2-london:4646' nomad job run job-instance.nomad;
-      working-directory: ./examples/${{ matrix.example }}
+      working-directory: ./examples/${{ matrix.example }}
+
+  # deploy-homepage:
+  #   runs-on: ubuntu-latest
+  #   needs: build-homepage
+
+  #   steps:
+  #   - uses: actions/checkout@v3
+  #     with:
+  #       submodules: true
+  #   - uses: gacts/install-nomad@v1
+  #   - name: Tailscale
+  #     uses: tailscale/github-action@v1
+  #     with:
+  #       authkey: ${{ secrets.TAILSCALE_AUTHKEY }}
+
+  #   - name: Deploy on Nomad
+  #     run: |
+  #       if [ "${{github.ref_name}}" == "main" ]; then
+  #         export BRANCH_SUFFIX="";
+  #         export BRANCH_SUBDOMAIN="";
+  #       else
+  #         export BRANCH_SUFFIX=-${{github.head_ref || github.ref_name}};
+  #         export BRANCH_SUBDOMAIN=${{github.head_ref || github.ref_name}}.;
+  #       fi
+
+  #       export DOCKER_USER=gardencmp;
+  #       export DOCKER_PASSWORD=${{ secrets.DOCKER_PULL_PAT }};
+  #       export DOCKER_TAG=ghcr.io/gardencmp/${{github.event.repository.name}}-homepage-jazz:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}};
+
+  #       envsubst '${DOCKER_USER} ${DOCKER_PASSWORD} ${DOCKER_TAG} ${BRANCH_SUFFIX} ${BRANCH_SUBDOMAIN}' < job-template.nomad > job-instance.nomad;
+  #       cat job-instance.nomad;
+  #       NOMAD_ADDR='http://control1v2-london:4646' nomad job run job-instance.nomad;
+  #     working-directory: ./homepage/homepage-jazz

DOCS.md

@@ -1,5 +1,11 @@
 # Overview
 
+---
+
+## These are work-in-progress API docs. <br/> To start learning Jazz, see [Getting Started](./README.md#getting-started)
+
+---
+
 ## Core packages
 
 ### `jazz-react` → [API](#jazz-react)
@@ -44,7 +50,7 @@
 <!-- AUTOGENERATED DOCS AFTER THIS POINT -->
 # jazz-react
 
-## `<WithJazz/>`
+## `WithJazz(props)`
 
 <sup>(function in `jazz-react`)</sup>
 
@@ -54,6 +60,7 @@ export function WithJazz(props: {
   children: ReactNode,
   syncAddress?: string,
   migration?: AccountMigration,
+  apiKey?: string,
 }): Element
 ```
 Top-level component that provides Jazz context to your whole app, so you can use Jazz hooks in your components.
@@ -67,6 +74,7 @@ Top-level component that provides Jazz context to your whole app, so you can use
 | `props.auth` | An auth provider (renders login/sign-up UI if not logged in) - see available providers in the [Documentation](../../../DOCS.md#auth-providers) |
 | `props.syncAddress?` | The address of the upstream syncing peer. Defaults to `wss://sync.jazz.tool` (Jazz Global Mesh). If not set explicitly, it can also be temporarily overwritten by setting the `sync` query parameter in the URL, like `https://your-app.example.net?sync=ws://localhost:4200`. |
 | `props.migration?` | TODO: document |
+| `props.apiKey?` | TODO: document |
 
 ##### Example:
 
@@ -265,6 +273,33 @@ TODO: document
 
 
 
+----
+
+## `DemoAuth({appName, appHostname?, Component?})`
+
+<sup>(function in `jazz-react`)</sup>
+
+```typescript
+export function DemoAuth({
+  appName: string,
+  appHostname?: string,
+  Component?: DemoAuthComponent,
+}): ReactAuthHook
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `__namedParameters.appName` | TODO: document |
+| `__namedParameters.appHostname?` | TODO: document |
+| `__namedParameters.Component?` | TODO: document |
+
+
+
+
+
 ----
 
 ## `ResolvedAccount`
@@ -1713,6 +1748,26 @@ TODO: document
 
 
 
+<details>
+<summary><b><code>.mapDeferred</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class ResolvedCoList<L> {
+
+  mapDeferred: (mapper: (item: {
+    loaded: boolean,
+    id: L["_item"] extends CoID<CoValue> ? any[any] : never,
+    value((): ValueOrResolvedRef<L["_item"]>,
+  }, idx: number) => O) => O[]
+
+}
+```
+TODO: document
+
+</details>
+
+
+
 <details>
 <summary><b><code>.length</code></b> <sub><sup>from <code>Array</code></sup></sub>  </summary>
 
@@ -2696,14 +2751,15 @@ TODO: document
 
 
 <details>
-<summary><b><code>.load(id)</code></b>  </summary>
+<summary><b><code>.load(id, onProgress?)</code></b>  </summary>
 
 ```typescript
 class LocalNode {
 
   load<T extends CoValue>(
-    id: CoID<T>
-  ): Promise<T> {...}
+    id: CoID<T>,
+    onProgress?: (progress: number) => void
+  ): Promise<"unavailable" | T> {...}
 
 }
 ```
@@ -2719,6 +2775,7 @@ for listening to subsequent updates to the CoValue.
 | ----: | ---- |
 | `id` | TODO: document  |
 
+
 </details>
 
 
@@ -2731,7 +2788,7 @@ class LocalNode {
 
   subscribe<T extends CoValue>(
     id: CoID<T>,
-    callback: (update: T) => void
+    callback: (update: "unavailable" | T) => void
   ): () => void {...}
 
 }
@@ -2793,6 +2850,32 @@ class LocalNode {
 
 
 
+<details>
+<summary><b><code>.resolveAccountAgentAsync(id, expectation?)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class LocalNode {
+
+  resolveAccountAgentAsync(
+    id: AgentID | AccountID,
+    expectation?: string
+  ): Promise<AgentID> {...}
+
+}
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `id` | TODO: document  |
+| `expectation?` | TODO: document  |
+
+</details>
+
+
+
 <details>
 <summary><b><code>.createGroup()</code></b>  </summary>
 
@@ -4965,6 +5048,10 @@ class CoList<Item, Meta> {
 
 
 
+
+
+
+
 ----
 
 ## `MutableCoList`
@@ -5368,6 +5455,10 @@ The `Group` this `CoValue` belongs to (determining permissions)
 
 
 
+
+
+
+
 ----
 
 ## `CoStream`
@@ -6428,6 +6519,88 @@ TODO: document
 
 ### `BinaryCoStream`: Methods
 
+<details>
+<summary><b><code>.push(item, privacy?)</code></b>  </summary>
+
+```typescript
+class BinaryCoStream<Meta> {
+
+  push(
+    item: BinaryStreamItem,
+    privacy?: "private" | "trusting"
+  ): BinaryCoStream<Meta> {...}
+
+}
+```
+
+
+
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `item` | TODO: document  |
+| `privacy?` | TODO: document  |
+
+</details>
+
+
+
+<details>
+<summary><b><code>.push(item, privacy, returnNewStream)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class BinaryCoStream<Meta> {
+
+  push(
+    item: BinaryStreamItem,
+    privacy: "private" | "trusting",
+    returnNewStream: true
+  ): BinaryCoStream<Meta> {...}
+
+}
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `item` | TODO: document  |
+| `privacy` | TODO: document  |
+| `returnNewStream` | TODO: document  |
+
+</details>
+
+
+
+<details>
+<summary><b><code>.push(item, privacy, returnNewStream)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class BinaryCoStream<Meta> {
+
+  push(
+    item: BinaryStreamItem,
+    privacy: "private" | "trusting",
+    returnNewStream: false
+  ): void {...}
+
+}
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `item` | TODO: document  |
+| `privacy` | TODO: document  |
+| `returnNewStream` | TODO: document  |
+
+</details>
+
 
 
 <details>
@@ -6439,7 +6612,7 @@ class BinaryCoStream<Meta> {
   startBinaryStream(
     settings: BinaryStreamInfo,
     privacy?: "private" | "trusting" = "private"
-  ): BinaryCoStream<Meta> {...}
+  ): void {...}
 
 }
 ```
@@ -6465,7 +6638,7 @@ class BinaryCoStream<Meta> {
   pushBinaryStreamChunk(
     chunk: Uint8Array,
     privacy?: "private" | "trusting" = "private"
-  ): BinaryCoStream<Meta> {...}
+  ): void {...}
 
 }
 ```
@@ -8803,13 +8976,12 @@ TODO: document
 ### `CoValueCore`: Accessors
 
 <details>
-<summary><b><code>.sessions</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+<summary><b><code>.sessionLogs</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
 
 ```typescript
 class CoValueCore {
 
-  get sessions(): Readonly<{
-    [key: SessionID]: SessionLog }> {...}
+  get sessionLogs(): Map<SessionID, SessionLog> {...}
 
 }
 ```
@@ -8846,8 +9018,7 @@ class CoValueCore {
   constructor(
     header: CoValueHeader,
     node: LocalNode,
-    internalInitSessions?: {
-      [key: SessionID]: SessionLog } = {}
+    internalInitSessions?: Map<SessionID, SessionLog> = ...
   ): CoValueCore {...}
 
 }
@@ -8860,7 +9031,7 @@ TODO: document
 | ----: | ---- |
 | `header` | TODO: document  |
 | `node` | TODO: document  |
-
+| `internalInitSessions?` | TODO: document  |
 
 </details>
 
@@ -8910,6 +9081,8 @@ undefined</details>
 
 
 
+
+
 <details>
 <summary><b><code>.nextTransactionID()</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
 
@@ -9324,6 +9497,8 @@ TODO: document
 
 undefined</details>
 
+
+
 <br/>
 
 ### `CoValueCore`: Properties
@@ -9377,13 +9552,12 @@ TODO: document
 
 
 <details>
-<summary><b><code>._sessions</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+<summary><b><code>._sessionLogs</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
 
 ```typescript
 class CoValueCore {
 
-  _sessions: {
-    [key: SessionID]: SessionLog }
+  _sessionLogs: Map<SessionID, SessionLog>
 
 }
 ```
@@ -9416,7 +9590,7 @@ TODO: document
 class CoValueCore {
 
   _decryptionCache: {
-    [key: Encrypted<JsonValue[], JsonValue>]: Stringified<JsonValue[]> | undefined }
+    [key: Encrypted<JsonValue[], JsonValue>]: JsonValue[] | undefined }
 
 }
 ```
@@ -9442,6 +9616,70 @@ TODO: document
 
 
 
+<details>
+<summary><b><code>.currentlyAsyncApplyingTxDone</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class CoValueCore {
+
+  currentlyAsyncApplyingTxDone: Promise<void>
+
+}
+```
+TODO: document
+
+</details>
+
+
+
+<details>
+<summary><b><code>._cachedKnownState</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class CoValueCore {
+
+  _cachedKnownState: CoValueKnownState
+
+}
+```
+TODO: document
+
+</details>
+
+
+
+<details>
+<summary><b><code>._cachedDependentOn</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class CoValueCore {
+
+  _cachedDependentOn: `co_z${string}`[]
+
+}
+```
+TODO: document
+
+</details>
+
+
+
+<details>
+<summary><b><code>._cachedNewContentSinceEmpty</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class CoValueCore {
+
+  _cachedNewContentSinceEmpty: NewContentMessage[]
+
+}
+```
+TODO: document
+
+</details>
+
+
+
 ----
 
 ## `Media`
@@ -9744,6 +9982,22 @@ TODO: document
 
 
 
+<details>
+<summary><b><code>.priority</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+interface Peer {
+
+  priority: number
+
+}
+```
+TODO: document
+
+</details>
+
+
+
 ----
 
 ## `Value`
@@ -10084,14 +10338,14 @@ TODO: document
 
 ----
 
-## `createBinaryStreamFromBlob(blob, inGroup, meta?)`
+## `createBinaryStreamFromBlob(blob, inGroup, meta?, onProgress?)`
 
 <sup>(function in `jazz-browser`)</sup>
 
 ```typescript
 export function createBinaryStreamFromBlob<C extends BinaryCoStream<BinaryCoStreamMeta>>(blob: Blob | File, inGroup: Group<Profile<ProfileShape, ProfileMeta>, CoMap<{
   [key: string]: JsonValue | undefined }, null | JsonObject>, null | JsonObject> | ResolvedGroup<Group<Profile<ProfileShape, ProfileMeta>, CoMap<{
-  [key: string]: JsonValue | undefined }, null | JsonObject>, null | JsonObject>>, meta: C["headerMeta"]): Promise<C>
+  [key: string]: JsonValue | undefined }, null | JsonObject>, null | JsonObject>>, meta: C["headerMeta"], onProgress: (progress: number) => void): Promise<C>
 ```
 TODO: document
 
@@ -10107,14 +10361,15 @@ TODO: document
 
 
 
+
 ----
 
-## `readBlobFromBinaryStream(streamId, node, allowUnfinished?)`
+## `readBlobFromBinaryStream(streamId, node, allowUnfinished?, onProgress?)`
 
 <sup>(function in `jazz-browser`)</sup>
 
 ```typescript
-export function readBlobFromBinaryStream<C extends BinaryCoStream<BinaryCoStreamMeta>>(streamId: CoID<C>, node: LocalNode, allowUnfinished: boolean): Promise<Blob | undefined>
+export function readBlobFromBinaryStream<C extends BinaryCoStream<BinaryCoStreamMeta>>(streamId: CoID<C>, node: LocalNode, allowUnfinished: boolean, onProgress: (progress: number) => void): Promise<Blob | undefined>
 ```
 TODO: document
 
@@ -10130,6 +10385,7 @@ TODO: document
 
 
 
+
 ----
 
 ## `autoSub(id, node, callback)`
@@ -10180,6 +10436,109 @@ TODO: document
 
 
 
+----
+
+## `BrowserDemoAuth`
+
+<sup>(class in `jazz-browser`)</sup>
+
+```typescript
+export class BrowserDemoAuth implements AuthProvider {...}
+```
+TODO: document
+
+### `BrowserDemoAuth`: Constructors
+
+<details>
+<summary><b><code>new BrowserDemoAuth</code></b>(driver, appName)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class BrowserDemoAuth {
+
+  constructor(
+    driver: BrowserDemoAuthDriver,
+    appName: string
+  ): BrowserDemoAuth {...}
+
+}
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `driver` | TODO: document  |
+| `appName` | TODO: document  |
+
+</details>
+
+<br/>
+
+### `BrowserDemoAuth`: Methods
+
+<details>
+<summary><b><code>.createNode(getSessionFor, initialPeers, migration?)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class BrowserDemoAuth {
+
+  createNode(
+    getSessionFor: SessionProvider,
+    initialPeers: Peer[],
+    migration?: AccountMigration
+  ): Promise<LocalNode> {...}
+
+}
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `getSessionFor` | TODO: document  |
+| `initialPeers` | TODO: document  |
+| `migration?` | TODO: document  |
+
+</details>
+
+<br/>
+
+### `BrowserDemoAuth`: Properties
+
+<details>
+<summary><b><code>.driver</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class BrowserDemoAuth {
+
+  driver: BrowserDemoAuthDriver
+
+}
+```
+TODO: document
+
+</details>
+
+
+
+<details>
+<summary><b><code>.appName</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class BrowserDemoAuth {
+
+  appName: string
+
+}
+```
+TODO: document
+
+</details>
+
+
+
 ----
 
 ## `ResolvedCoStream`
@@ -11427,6 +11786,26 @@ TODO: document
 
 
 
+<details>
+<summary><b><code>.mapDeferred</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class ResolvedCoList<L> {
+
+  mapDeferred: (mapper: (item: {
+    loaded: boolean,
+    id: L["_item"] extends CoID<CoValue> ? any[any] : never,
+    value((): ValueOrResolvedRef<L["_item"]>,
+  }, idx: number) => O) => O[]
+
+}
+```
+TODO: document
+
+</details>
+
+
+
 <details>
 <summary><b><code>.length</code></b> <sub><sup>from <code>Array</code></sup></sub>  </summary>
 
@@ -12432,14 +12811,15 @@ TODO: document
 ### `AutoSubContext`: Methods
 
 <details>
-<summary><b><code>.autoSub(valueID, alsoRender)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+<summary><b><code>.autoSub(valueID, alsoRender, _path)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
 
 ```typescript
 class AutoSubContext {
 
   autoSub<T extends CoValue>(
     valueID: CoID<T>,
-    alsoRender: CoID<CoValue>[]
+    alsoRender: CoID<CoValue>[],
+    _path: string
   ): undefined | Resolved<T> {...}
 
 }
@@ -12452,20 +12832,22 @@ TODO: document
 | ----: | ---- |
 | `valueID` | TODO: document  |
 | `alsoRender` | TODO: document  |
+| `_path` | TODO: document  |
 
 </details>
 
 
 
 <details>
-<summary><b><code>.subscribeIfCoID(value, alsoRender)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+<summary><b><code>.subscribeIfCoID(value, alsoRender, path)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
 
 ```typescript
 class AutoSubContext {
 
   subscribeIfCoID<T extends undefined | JsonValue>(
     value: T,
-    alsoRender: CoID<CoValue>[]
+    alsoRender: CoID<CoValue>[],
+    path: string
   ): T extends CoID<C> ? undefined | Resolved<C> : T {...}
 
 }
@@ -12478,20 +12860,22 @@ TODO: document
 | ----: | ---- |
 | `value` | TODO: document  |
 | `alsoRender` | TODO: document  |
+| `path` | TODO: document  |
 
 </details>
 
 
 
 <details>
-<summary><b><code>.valueOrResolvedRefPropertyDescriptor(value, alsoRender)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+<summary><b><code>.valueOrResolvedRefPropertyDescriptor(value, alsoRender, path)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
 
 ```typescript
 class AutoSubContext {
 
   valueOrResolvedRefPropertyDescriptor<T extends undefined | JsonValue>(
     value: T,
-    alsoRender: CoID<CoValue>[]
+    alsoRender: CoID<CoValue>[],
+    path: string
   ): T extends CoID<C>
     ? {
       get((): undefined | Resolved<C>,
@@ -12510,6 +12894,7 @@ TODO: document
 | ----: | ---- |
 | `value` | TODO: document  |
 | `alsoRender` | TODO: document  |
+| `path` | TODO: document  |
 
 </details>
 
@@ -12708,6 +13093,57 @@ TODO: document
 
 
 
+----
+
+## `BrowserDemoAuthDriver`
+
+<sup>(interface in `jazz-browser`)</sup>
+
+```typescript
+export interface BrowserDemoAuthDriver {...}
+```
+TODO: document
+
+### `BrowserDemoAuthDriver`: Properties
+
+<details>
+<summary><b><code>.onReady</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+interface BrowserDemoAuthDriver {
+
+  onReady: (next: {
+    signUp: (username: string) => Promise<void>,
+    existingUsers: string[],
+    logInAs: (existingUser: string) => Promise<void>,
+  }) => void
+
+}
+```
+TODO: document
+
+</details>
+
+
+
+<details>
+<summary><b><code>.onSignedIn</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+interface BrowserDemoAuthDriver {
+
+  onSignedIn: (next: {
+    logOut: () => void,
+  }) => void
+
+}
+```
+TODO: document
+
+</details>
+
+
+
 ----
 
 ## `AutoSubExtension`
@@ -14214,6 +14650,26 @@ TODO: document
 
 
 
+<details>
+<summary><b><code>.mapDeferred</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class ResolvedCoList<L> {
+
+  mapDeferred: (mapper: (item: {
+    loaded: boolean,
+    id: L["_item"] extends CoID<CoValue> ? any[any] : never,
+    value((): ValueOrResolvedRef<L["_item"]>,
+  }, idx: number) => O) => O[]
+
+}
+```
+TODO: document
+
+</details>
+
+
+
 <details>
 <summary><b><code>.length</code></b> <sub><sup>from <code>Array</code></sup></sub>  </summary>
 
@@ -15219,14 +15675,15 @@ TODO: document
 ### `AutoSubContext`: Methods
 
 <details>
-<summary><b><code>.autoSub(valueID, alsoRender)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+<summary><b><code>.autoSub(valueID, alsoRender, _path)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
 
 ```typescript
 class AutoSubContext {
 
   autoSub<T extends CoValue>(
     valueID: CoID<T>,
-    alsoRender: CoID<CoValue>[]
+    alsoRender: CoID<CoValue>[],
+    _path: string
   ): undefined | Resolved<T> {...}
 
 }
@@ -15239,20 +15696,22 @@ TODO: document
 | ----: | ---- |
 | `valueID` | TODO: document  |
 | `alsoRender` | TODO: document  |
+| `_path` | TODO: document  |
 
 </details>
 
 
 
 <details>
-<summary><b><code>.subscribeIfCoID(value, alsoRender)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+<summary><b><code>.subscribeIfCoID(value, alsoRender, path)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
 
 ```typescript
 class AutoSubContext {
 
   subscribeIfCoID<T extends undefined | JsonValue>(
     value: T,
-    alsoRender: CoID<CoValue>[]
+    alsoRender: CoID<CoValue>[],
+    path: string
   ): T extends CoID<C> ? undefined | Resolved<C> : T {...}
 
 }
@@ -15265,20 +15724,22 @@ TODO: document
 | ----: | ---- |
 | `value` | TODO: document  |
 | `alsoRender` | TODO: document  |
+| `path` | TODO: document  |
 
 </details>
 
 
 
 <details>
-<summary><b><code>.valueOrResolvedRefPropertyDescriptor(value, alsoRender)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+<summary><b><code>.valueOrResolvedRefPropertyDescriptor(value, alsoRender, path)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
 
 ```typescript
 class AutoSubContext {
 
   valueOrResolvedRefPropertyDescriptor<T extends undefined | JsonValue>(
     value: T,
-    alsoRender: CoID<CoValue>[]
+    alsoRender: CoID<CoValue>[],
+    path: string
   ): T extends CoID<C>
     ? {
       get((): undefined | Resolved<C>,
@@ -15297,6 +15758,7 @@ TODO: document
 | ----: | ---- |
 | `value` | TODO: document  |
 | `alsoRender` | TODO: document  |
+| `path` | TODO: document  |
 
 </details>
 
@@ -15543,4 +16005,58 @@ export type Resolved<T extends CoValue> = T extends CoMap
       } ? never : ResolvedCoStream<T>
       : ResolvedAccount | ResolvedGroup | ResolvedCoMap<CoMap> | ResolvedCoList<CoList> | ResolvedCoStream<CoStream>
 ```
-TODO: doc generator not implemented yet 2097152
+TODO: doc generator not implemented yet 2097152
+
+
+# jazz-nodejs
+
+## `createOrResumeWorker({workerName, syncServer?, migration?})`
+
+<sup>(function in `jazz-nodejs`)</sup>
+
+```typescript
+export function createOrResumeWorker<P extends Profile<ProfileShape, ProfileMeta>, R extends CoMap<{
+  [key: string]: JsonValue | undefined }, null | JsonObject>>({
+  workerName: string,
+  syncServer?: string,
+  migration?: AccountMigration<P, R>,
+}): Promise<{
+  localNode: LocalNode,
+  worker: ControlledAccount<P, R, AccountMeta>,
+}>
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `__namedParameters.workerName` | TODO: document |
+| `__namedParameters.syncServer?` | TODO: document |
+| `__namedParameters.migration?` | TODO: document |
+
+
+
+
+
+----
+
+## `autoSub(id, node, callback)`
+
+<sup>(function in `jazz-nodejs`)</sup>
+
+```typescript
+export function autoSub<C extends CoValue>(id: undefined | CoID<C>, node: LocalNode, callback: (resolved: undefined | Resolved<C>) => void): () => void
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `id` | TODO: document  |
+| `node` | TODO: document  |
+
+
+
+

examples/chat/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

examples/chat/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/chat/CHANGELOG.md

@@ -0,0 +1,9 @@
+# jazz-example-chat
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/chat/Dockerfile

@@ -0,0 +1,4 @@
+FROM caddy:2.7.3-alpine
+LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+
+COPY ./dist /usr/share/caddy/

examples/chat/README.md

@@ -0,0 +1,64 @@
+# Jazz Todo List Example
+
+Live version: https://example-todo.jazz.tools
+
+## Installing & running the example locally
+
+Start by checking out just the example app to a folder:
+
+```bash
+npx degit gardencmp/jazz/examples/todo jazz-example-todo
+cd jazz-example-todo
+```
+
+(This ensures that you have the example app without git history or our multi-package monorepo)
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+## Structure
+
+- [`src/basicComponents`](./src/basicComponents): simple components to build the UI, unrelated to Jazz (uses [shadcn/ui](https://ui.shadcn.com))
+- [`src/components`](./src/components/): helper components that do contain Jazz-specific logic, but aren't very relevant to understand the basics of Jazz and CoJSON
+- [`src/1_types.ts`](./src/1_types.ts),
+[`src/2_main.tsx`](./src/2_main.tsx),
+[`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx),
+[`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx): the main files for this example, see the walkthrough below
+
+## Walkthrough
+
+### Main parts
+
+1. Defining the data model with CoJSON: [`src/1_types.ts`](./src/1_types.ts)
+
+2. The top-level provider `<WithJazz/>` and routing: [`src/2_main.tsx`](./src/2_main.tsx)
+
+3. Creating a new todo project: [`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx)
+
+4. Reactively rendering a todo project as a table, adding and editing tasks: [`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx)
+
+### Helpers
+
+- (not yet explained) Creating invite links/QR codes with `<InviteButton/>`: [`src/components/InviteButton.tsx`](./src/components/InviteButton.tsx)
+
+This is the whole Todo List app!
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<WithJazz>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/chat/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <link rel="stylesheet" href="/src/index.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz Chat Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/app.tsx"></script>
+  </body>
+</html>

examples/chat/job-template.nomad

@@ -0,0 +1,56 @@
+job "chat$BRANCH_SUFFIX" {
+  region     = "global"
+  datacenters = ["*"]
+
+  group "static" {
+    count = 4
+
+    network {
+      port "http" {
+        to = 80
+      }
+    }
+
+    constraint {
+      attribute = "${node.class}"
+      operator  = "="
+      value     = "mesh"
+    }
+
+    spread {
+      attribute = "${node.datacenter}"
+      weight    = 100
+    }
+
+    constraint {
+      distinct_hosts = true
+    }
+
+    task "server" {
+      driver = "docker"
+
+      config {
+        image = "$DOCKER_TAG"
+        ports = ["http"]
+
+        auth = {
+          username = "$DOCKER_USER"
+          password = "$DOCKER_PASSWORD"
+        }
+      }
+
+      service {
+        tags = ["public"]
+        name = "chat$BRANCH_SUFFIX"
+        port = "http"
+        provider = "consul"
+      }
+
+      resources {
+        cpu    = 50 # MHz
+        memory = 50 # MB
+      }
+    }
+  }
+}
+# deploy bump 4

examples/chat/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "jazz-example-chat",
+  "private": true,
+  "version": "0.0.46",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@types/qrcode": "^1.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "hash-slash": "^0.1.3",
+    "jazz-react": "^0.5.0",
+    "jazz-react-auth-local": "^0.4.16",
+    "lucide-react": "^0.274.0",
+    "qrcode": "^1.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0",
+    "react-use": "^17.4.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "uniqolor": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

examples/chat/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/chat/src/app.tsx

@@ -0,0 +1,35 @@
+import { WithJazz, useJazz, DemoAuth } from 'jazz-react';
+import ReactDOM from 'react-dom/client';
+import { HashRoute } from 'hash-slash';
+import { ChatWindow } from './chatWindow.tsx';
+import { Chat } from './dataModel.ts';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <WithJazz auth={DemoAuth({ appName: 'Jazz Chat Example' })} apiKey="api_z9d034j3t34ht034ir">
+    <App />
+  </WithJazz>,
+);
+
+function App() {
+  return <div className='flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white'>
+    <button onClick={useJazz().logOut} className='rounded mb-5 px-2 py-1 bg-stone-200 dark:bg-stone-800 dark:text-white self-end'>
+      Log Out
+    </button>
+    {HashRoute({
+      '/': <Home />,
+      '/chat/:id': (id) => <ChatWindow chatId={id as Chat['id']} />,
+    }, { reportToParentFrame: true })}
+  </div>
+}
+
+function Home() {
+  const { me } = useJazz();
+  return <button className='rounded py-2 px-4 bg-stone-200 dark:bg-stone-800 dark:text-white my-auto'
+    onClick={() => {
+      const group = me.createGroup().addMember('everyone', 'writer');
+      const chat = group.createList<Chat>();
+      location.hash = '/chat/' + chat.id;
+    }}>
+    Create New Chat
+  </button>
+}

examples/chat/src/chatWindow.tsx

@@ -0,0 +1,43 @@
+import { useAutoSub } from 'jazz-react';
+import { Chat, Message } from './dataModel.ts';
+
+export function ChatWindow(props: { chatId: Chat['id'] }) {
+  const chat = useAutoSub(props.chatId);
+
+  return chat ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
+    {
+      chat.map((msg, i) => (
+        <ChatBubble key={msg?.id}
+          text={msg?.text}
+          by={chat.meta.edits[i].by?.profile?.name}
+          byMe={chat.meta.edits[i].by?.isMe}
+          at={chat.meta.edits[i].at} />
+      ))
+    }
+    <ChatInput onSubmit={(text) => {
+      const msg = chat.meta.group.createMap<Message>({ text });
+      chat.append(msg.id);
+    }}/>
+  </div> : <div>Loading...</div>;
+}
+
+function ChatBubble(props: { text?: string, by?: string, at?: Date, byMe?: boolean }) {
+  return <div className={`${props.byMe ? 'items-end' : 'items-start'} flex flex-col`}>
+    <div className='rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]'>
+      { props.text }
+    </div>
+    <div className='text-xs text-neutral-500 ml-2'>
+      { props.by } { props.at?.getHours() }:{ props.at?.getMinutes() }
+    </div>
+  </div>;
+}
+
+function ChatInput(props: { onSubmit: (text: string) => void }) {
+  return <input className='rounded p-2 border mt-auto dark:bg-black dark:text-white dark:border-stone-700'
+    placeholder='Type a message and press Enter'
+    onKeyDown={({ key, currentTarget: input }) => {
+      if (key !== 'Enter' || !input.value) return;
+      props.onSubmit(input.value);
+      input.value = '';
+    }}/>
+}

examples/chat/src/dataModel.ts

@@ -0,0 +1,4 @@
+import { CoMap, CoList } from 'cojson';
+
+export type Chat = CoList<Message['id']>;
+export type Message = CoMap<{ text: string }>;

examples/chat/src/index.css

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    margin: 0;
+    padding: 0;
+  }
+}

examples/chat/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/chat/tailwind.config.js

@@ -0,0 +1,75 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

examples/chat/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/chat/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/chat/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    minify: false
+  }
+})

examples/file-drop/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

examples/file-drop/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/file-drop/CHANGELOG.md

@@ -0,0 +1,9 @@
+# jazz-example-file-drop
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/file-drop/Dockerfile

@@ -0,0 +1,4 @@
+FROM caddy:2.7.3-alpine
+LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+
+COPY ./dist /usr/share/caddy/

examples/file-drop/README.md

@@ -0,0 +1,64 @@
+# Jazz Todo List Example
+
+Live version: https://example-todo.jazz.tools
+
+## Installing & running the example locally
+
+Start by checking out just the example app to a folder:
+
+```bash
+npx degit gardencmp/jazz/examples/todo jazz-example-todo
+cd jazz-example-todo
+```
+
+(This ensures that you have the example app without git history or our multi-package monorepo)
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+## Structure
+
+- [`src/basicComponents`](./src/basicComponents): simple components to build the UI, unrelated to Jazz (uses [shadcn/ui](https://ui.shadcn.com))
+- [`src/components`](./src/components/): helper components that do contain Jazz-specific logic, but aren't very relevant to understand the basics of Jazz and CoJSON
+- [`src/1_types.ts`](./src/1_types.ts),
+[`src/2_main.tsx`](./src/2_main.tsx),
+[`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx),
+[`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx): the main files for this example, see the walkthrough below
+
+## Walkthrough
+
+### Main parts
+
+1. Defining the data model with CoJSON: [`src/1_types.ts`](./src/1_types.ts)
+
+2. The top-level provider `<WithJazz/>` and routing: [`src/2_main.tsx`](./src/2_main.tsx)
+
+3. Creating a new todo project: [`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx)
+
+4. Reactively rendering a todo project as a table, adding and editing tasks: [`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx)
+
+### Helpers
+
+- (not yet explained) Creating invite links/QR codes with `<InviteButton/>`: [`src/components/InviteButton.tsx`](./src/components/InviteButton.tsx)
+
+This is the whole Todo List app!
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<WithJazz>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/file-drop/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "stone",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/basicComponents",
+    "utils": "@/basicComponents/lib/utils"
+  }
+}

examples/file-drop/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz File Drop Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/2_main.tsx"></script>
+  </body>
+</html>

examples/file-drop/job-template.nomad

@@ -0,0 +1,56 @@
+job "example-file-drop$BRANCH_SUFFIX" {
+  region     = "global"
+  datacenters = ["*"]
+
+  group "static" {
+    count = 4
+
+    network {
+      port "http" {
+        to = 80
+      }
+    }
+
+    constraint {
+      attribute = "${node.class}"
+      operator  = "="
+      value     = "mesh"
+    }
+
+    spread {
+      attribute = "${node.datacenter}"
+      weight    = 100
+    }
+
+    constraint {
+      distinct_hosts = true
+    }
+
+    task "server" {
+      driver = "docker"
+
+      config {
+        image = "$DOCKER_TAG"
+        ports = ["http"]
+
+        auth = {
+          username = "$DOCKER_USER"
+          password = "$DOCKER_PASSWORD"
+        }
+      }
+
+      service {
+        tags = ["public"]
+        name = "example-file-drop$BRANCH_SUFFIX"
+        port = "http"
+        provider = "consul"
+      }
+
+      resources {
+        cpu    = 50 # MHz
+        memory = 50 # MB
+      }
+    }
+  }
+}
+# deploy bump 4

examples/file-drop/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "jazz-example-file-drop",
+  "private": true,
+  "version": "0.0.63",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 6610",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@types/qrcode": "^1.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "jazz-react": "^0.5.0",
+    "jazz-react-auth-local": "^0.4.16",
+    "lucide-react": "^0.274.0",
+    "qrcode": "^1.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "uniqolor": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

examples/file-drop/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/file-drop/src/1_types.ts

@@ -0,0 +1,5 @@
+import { CoMap, BinaryCoStream } from "cojson";
+
+export type FileBundle = CoMap<{
+    [filename: string]: BinaryCoStream['id']
+}>;

examples/file-drop/src/2_main.tsx

@@ -0,0 +1,187 @@
+import React, { ChangeEvent, useCallback, useState } from "react";
+import ReactDOM from "react-dom/client";
+import {
+    RouterProvider,
+    createHashRouter,
+    useNavigate,
+    useParams,
+} from "react-router-dom";
+import "./index.css";
+
+import { WithJazz, useJazz, useAcceptInvite, useAutoSub } from "jazz-react";
+import { LocalAuth } from "jazz-react-auth-local";
+
+import {
+    Button,
+    Input,
+    ThemeProvider,
+    TitleAndLogo,
+} from "./basicComponents/index.ts";
+import { PrettyAuthUI } from "./components/Auth.tsx";
+import { FileBundle } from "./1_types.ts";
+import {
+    createBinaryStreamFromBlob,
+    readBlobFromBinaryStream,
+} from "jazz-browser";
+import { DownloadIcon } from "lucide-react";
+
+const appName = "Jazz File Drop Example";
+
+const auth = LocalAuth({
+    appName,
+    Component: PrettyAuthUI,
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <ThemeProvider>
+            <TitleAndLogo name={appName} />
+            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+                <WithJazz auth={auth}>
+                    <App />
+                </WithJazz>
+            </div>
+        </ThemeProvider>
+    </React.StrictMode>
+);
+
+function App() {
+    // logOut logs out the AuthProvider passed to `<WithJazz/>` above.
+    const { logOut } = useJazz();
+
+    const router = createHashRouter([
+        {
+            path: "/",
+            element: <FileDropUI />,
+        },
+        {
+            path: "/bundle/:bundleId",
+            element: <FileDropUIPage />,
+        },
+        {
+            path: "/invite/*",
+            element: <p>Accepting invite...</p>,
+        },
+    ]);
+
+    // `useAcceptInvite()` is a hook that accepts an invite link from the URL hash,
+    // and on success calls our callback where we navigate to the project that we were just invited to.
+    useAcceptInvite((bundleId) => router.navigate("/v/" + bundleId));
+
+    return (
+        <>
+            <RouterProvider router={router} />
+
+            <Button
+                onClick={() => router.navigate("/").then(logOut)}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </>
+    );
+}
+
+export function FileDropUIPage() {
+    const { bundleId } = useParams<{ bundleId: FileBundle["id"] }>();
+
+    return <FileDropUI bundleId={bundleId} />;
+}
+
+export function FileDropUI({ bundleId }: { bundleId?: FileBundle["id"] }) {
+    const navigate = useNavigate();
+    const { me, localNode } = useJazz();
+    const fileBundle = useAutoSub(bundleId);
+
+    const [progressMessage, setProgressMessage] = useState<{
+        [name: string]: string;
+    }>({});
+
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            let fileBundleToUse = fileBundle?.meta.coValue;
+            let isFirstUpload = false;
+
+            if (!fileBundleToUse) {
+                const group = me.createGroup().addMember("everyone", "reader");
+                fileBundleToUse = group.createMap<FileBundle>();
+                isFirstUpload = true;
+            }
+
+            const files = [...(event.target.files || [])];
+
+            Promise.all(
+                files.map((file) =>
+                    createBinaryStreamFromBlob(
+                        file,
+                        fileBundleToUse!.group,
+                        { type: "binary" },
+                        (progress) =>
+                            setProgressMessage((old) => ({
+                                ...old,
+                                [file.name]: `Creating ${Math.round(
+                                    progress * 100
+                                )}%`,
+                            }))
+                    ).then((stream) => {
+                        fileBundleToUse!.set(file.name, stream.id);
+                    })
+                )
+            ).then(() => {
+                if (isFirstUpload) {
+                    navigate("/bundle/" + fileBundleToUse!.id);
+                }
+            });
+
+            event.target.value = "";
+        },
+        [me, navigate, fileBundle]
+    );
+
+    return (
+        <div className="max-w-full p-5 w-[40rem]">
+            <h1 className="text-3xl font-bold mb-5">File Drop</h1>
+            {[
+                ...new Set([
+                    ...Object.keys(fileBundle || {}),
+                    ...Object.keys(progressMessage),
+                ]),
+            ].map((name) => (
+                <div className="mb-5 flex justify-between" key={name}>
+                    {name} {progressMessage[name]}
+                    <Button
+                        size="sm"
+                        disabled={!(name in (fileBundle || {}))}
+                        onClick={() => {
+                            const streamId = fileBundle?.meta.coValue.get(name);
+                            streamId &&
+                                readBlobFromBinaryStream(
+                                    streamId,
+                                    localNode,
+                                    false,
+                                    (progress) =>
+                                        setProgressMessage((old) => ({
+                                            ...old,
+                                            [name]: `Loading ${Math.round(
+                                                progress * 100
+                                            )}%`,
+                                        }))
+                                ).then((blob) => {
+                                    if (!blob) return;
+                                    const url = URL.createObjectURL(blob);
+                                    window.open(url, "_blank");
+                                });
+                        }}
+                    >
+                        <DownloadIcon />
+                    </Button>
+                </div>
+            ))}
+            {(!fileBundle || fileBundle.meta.group.myRole() === "admin") && (
+                <Input type="file" onChange={onChange} multiple />
+            )}
+        </div>
+    );
+}
+
+/** Walkthrough: Continue with ./3_NewProjectForm.tsx */

examples/file-drop/src/basicComponents/SubmittableInput.tsx

@@ -0,0 +1,39 @@
+import { Input } from "@/basicComponents/ui/input";
+import { Button } from "@/basicComponents/ui/button";
+
+export function SubmittableInput({
+    onSubmit,
+    label,
+    placeholder,
+    disabled,
+}: {
+    onSubmit: (text: string) => void;
+    label: string;
+    placeholder: string;
+    disabled?: boolean;
+}) {
+    return (
+        <form
+            className="flex flex-row items-center gap-3"
+            onSubmit={(e) => {
+                e.preventDefault();
+                const textEl = e.currentTarget.elements.namedItem(
+                    "text"
+                ) as HTMLInputElement;
+                onSubmit(textEl.value);
+                textEl.value = "";
+            }}
+        >
+            <Input
+                className="-ml-3 -my-2 flex-grow flex-3 text-base"
+                name="text"
+                placeholder={placeholder}
+                autoComplete="off"
+                disabled={disabled}
+            />
+            <Button asChild type="submit" className="flex-shrink flex-1 cursor-pointer">
+                <Input type="submit" value={label} disabled={disabled} />
+            </Button>
+        </form>
+    );
+}

examples/file-drop/src/basicComponents/TitleAndLogo.tsx

@@ -0,0 +1,10 @@
+import { Toaster } from ".";
+
+export function TitleAndLogo({name}: {name: string}) {
+    return <>
+        <div className="flex items-center gap-2 justify-center mt-5">
+                <img src="jazz-logo.png" className="h-5" /> {name}
+            </div>
+            <Toaster />
+    </>
+}

examples/file-drop/src/basicComponents/index.ts

@@ -0,0 +1,17 @@
+export { Button } from "./ui/button";
+export { Checkbox } from "./ui/checkbox";
+export { Input } from "./ui/input";
+export { Skeleton } from "./ui/skeleton";
+export { Toaster } from "./ui/toaster";
+export { useToast } from "./ui/use-toast";
+export { SubmittableInput } from "./SubmittableInput";
+export { TitleAndLogo } from "./TitleAndLogo";
+export { ThemeProvider } from "./themeProvider";
+export {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "./ui/table";

examples/file-drop/src/basicComponents/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

examples/file-drop/src/basicComponents/themeProvider.tsx

@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: string;
+    storageKey?: string;
+};
+
+type ThemeProviderState = {
+    theme: string;
+    setTheme: (theme: string) => void;
+};
+
+const initialState = {
+    theme: "system",
+    setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+    children,
+    defaultTheme = "system",
+    storageKey = "vite-ui-theme",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState(
+        () => localStorage.getItem(storageKey) || defaultTheme
+    );
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+
+        root.classList.remove("light", "dark");
+
+        if (theme === "system") {
+            const systemTheme = window.matchMedia(
+                "(prefers-color-scheme: dark)"
+            ).matches
+                ? "dark"
+                : "light";
+
+            root.classList.add(systemTheme);
+            return;
+        }
+
+        root.classList.add(theme);
+    }, [theme]);
+
+    const value = {
+        theme,
+        setTheme: (theme: string) => {
+            localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        },
+    };
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    );
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+
+    if (context === undefined)
+        throw new Error("useTheme must be used within a ThemeProvider");
+
+    return context;
+};

examples/file-drop/src/basicComponents/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

examples/file-drop/src/basicComponents/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

examples/file-drop/src/basicComponents/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

examples/file-drop/src/basicComponents/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/basicComponents/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

examples/file-drop/src/basicComponents/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

examples/file-drop/src/basicComponents/ui/toast.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

examples/file-drop/src/basicComponents/ui/toaster.tsx

@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/basicComponents/ui/toast"
+import { useToast } from "@/basicComponents/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

examples/file-drop/src/basicComponents/ui/use-toast.ts

@@ -0,0 +1,192 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/basicComponents/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

examples/file-drop/src/components/Auth.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+
+import { LocalAuthComponent } from "jazz-react-auth-local";
+
+import { Input, Button } from "../basicComponents";
+
+export const PrettyAuthUI: LocalAuthComponent = ({
+    loading,
+    logIn,
+    signUp,
+}) => {
+    const [username, setUsername] = useState<string>("");
+
+    return (
+        <div className="w-full h-full flex items-center justify-center p-5">
+            {loading ? (
+                <div>Loading...</div>
+            ) : (
+                <div className="w-72 flex flex-col gap-4">
+                    <form
+                        className="w-72 flex flex-col gap-2"
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            signUp(username);
+                        }}
+                    >
+                        <Input
+                            placeholder="Display name"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            autoComplete="webauthn"
+                            className="text-base"
+                        />
+                        <Button asChild>
+                            <Input
+                                type="submit"
+                                value="Sign Up as new account"
+                            />
+                        </Button>
+                    </form>
+                    <Button onClick={logIn}>
+                        Log In with existing account
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+};

examples/file-drop/src/components/InviteButton.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import QRCode from "qrcode";
+
+import { useToast, Button } from "../basicComponents";
+import { CoValue } from "cojson";
+import { Resolved, createInviteLink } from "jazz-react";
+
+export function InviteButton<T extends CoValue>({ value }: { value?: Resolved<T> }) {
+    const [existingInviteLink, setExistingInviteLink] = useState<string>();
+    const { toast } = useToast();
+
+    return (
+        value?.meta.group?.myRole() === "admin" && (
+            <Button
+                size="sm"
+                className="py-0"
+                disabled={!value.meta.group || !value.id}
+                variant="outline"
+                onClick={async () => {
+                    let inviteLink = existingInviteLink;
+                    if (value.meta.group && value.id && !inviteLink) {
+                        inviteLink = createInviteLink(value, "writer");
+                        setExistingInviteLink(inviteLink);
+                    }
+                    if (inviteLink) {
+                        const qr = await QRCode.toDataURL(inviteLink, {
+                            errorCorrectionLevel: "L",
+                        });
+                        navigator.clipboard.writeText(inviteLink).then(() =>
+                            toast({
+                                title: "Copied invite link to clipboard!",
+                                description: (
+                                    <img src={qr} className="w-20 h-20" />
+                                ),
+                            })
+                        );
+                    }
+                }}
+            >
+                Invite
+            </Button>
+        )
+    );
+}

examples/file-drop/src/index.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+ 
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+ 
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+ 
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+ 
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+ 
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+ 
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+ 
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+ 
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+ 
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+ 
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/file-drop/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/file-drop/tailwind.config.js

@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

examples/file-drop/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/file-drop/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/file-drop/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    minify: false
+  }
+})

examples/pets/CHANGELOG.md

@@ -0,0 +1,10 @@
+# jazz-example-pets
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.5.0
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/pets/job-template.nomad

@@ -3,7 +3,7 @@ job "example-pets$BRANCH_SUFFIX" {
   datacenters = ["*"]
 
   group "static" {
-    count = 8
+    count = 4
 
     network {
       port "http" {

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.21",
+  "version": "0.0.63",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,9 +16,9 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "^0.4.9",
-    "jazz-react": "^0.4.8",
-    "jazz-react-auth-local": "^0.4.8",
+    "jazz-browser-media-images": "^0.5.0",
+    "jazz-react": "^0.5.0",
+    "jazz-react-auth-local": "^0.4.16",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/todo/CHANGELOG.md

@@ -0,0 +1,9 @@
+# jazz-example-todo
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/todo/job-template.nomad

@@ -3,7 +3,7 @@ job "example-todo$BRANCH_SUFFIX" {
   datacenters = ["*"]
 
   group "static" {
-    count = 8
+    count = 4
 
     network {
       port "http" {

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.45",
+  "version": "0.0.63",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "^0.4.8",
-    "jazz-react-auth-local": "^0.4.8",
+    "jazz-react": "^0.5.0",
+    "jazz-react-auth-local": "^0.4.16",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/todo/src/1_types.ts

@@ -24,10 +24,15 @@ export type TodoProject = CoMap<{
 
 export type ListOfProjects = CoList<TodoProject["id"]>;
 
+/** The account root is an app-specific per-user private `CoMap`
+ *  where you can store top-level objects for that user */
 export type TodoAccountRoot = CoMap<{
     projects: ListOfProjects["id"];
 }>;
 
+/** The account migration is run on account creation and on every log-in.
+ *  You can use it to set up the account root and any other initial CoValues you need.
+ */
 export const migration: AccountMigration<Profile, TodoAccountRoot> = (account) => {
     if (!account.get("root")) {
         account.set(

examples/todo/src/2_main.tsx

@@ -25,9 +25,11 @@ import { AccountMigration, Profile } from "cojson";
  * Walkthrough: The top-level provider `<WithJazz/>`
  *
  * This shows how to use the top-level provider `<WithJazz/>`,
- * which provides the rest of the app with a `LocalNode` (used through `useJazz` later),
- * based on `LocalAuth` that uses Passkeys (aka WebAuthn) to store a user's account secret
+ * which provides the rest of the app with a controlled account (used through `useJazz` later).
+ * Here we use `LocalAuth`, which uses Passkeys (aka WebAuthn) to store a user's account secret
  * - no backend needed.
+ *
+ * `<WithJazz/>` also runs our account migration
  */
 
 const appName = "Jazz Todo List Example";

examples/twit-stresstest/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
+TwitAllTwitsCreatorCredentials.json

examples/twit-stresstest/CHANGELOG.md

@@ -0,0 +1,32 @@
+# twit-stresstest
+
+## 0.2.0
+
+### Minor Changes
+
+- Make addMember and removeMember take loaded Accounts instead of just IDs
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-nodejs@0.6.0
+
+## 0.1.1
+
+### Patch Changes
+
+- Allow account migrations to be async
+- Updated dependencies
+  - jazz-nodejs@0.5.3
+
+## 0.1.0
+
+### Minor Changes
+
+- Adding a lot of performance improvements to cojson, add a stresstest for the twit example and make that run smoother in a lot of ways.
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson-transport-nodejs-ws@0.5.0
+  - cojson@0.5.0

examples/twit-stresstest/index.ts

@@ -0,0 +1,104 @@
+import { LocalNode, cojsonReady, ControlledAccount, AccountID } from "cojson";
+import {
+    ALL_TWEETS_LIST_ID,
+    LikeStream,
+    ListOfTwits,
+    ReplyStream,
+    Twit,
+    TwitAccountRoot,
+    TwitProfile,
+    migration,
+} from "../twit/src/1_dataModel.js";
+
+import { createOrResumeWorker, autoSub } from "jazz-nodejs";
+
+async function runner() {
+    const { localNode: node, worker } = await createOrResumeWorker({
+        workerName: "TwitStressTestBot" + Math.random().toString(36).slice(2),
+    });
+
+    console.log(
+        "profile",
+        node.expectProfileLoaded(node.account.id as AccountID).id
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 10_000));
+
+    const loadedAllTwits = await node.load(ALL_TWEETS_LIST_ID);
+
+    if (loadedAllTwits === "unavailable") {
+        throw new Error("allTweets is unavailable");
+    }
+
+    let allTwits = loadedAllTwits;
+    let startedPosting = false;
+
+    autoSub(
+        (node.account as ControlledAccount<TwitProfile, TwitAccountRoot>).id,
+        node,
+        async (me) => {
+            if (
+                !me?.root?.peopleWhoCanSeeMyContent ||
+                !me.root.peopleWhoCanInteractWithMe
+            )
+                return;
+            if (startedPosting) return;
+            startedPosting = true;
+            for (let i = 0; i < 10; i++) {
+                await new Promise(
+                    (resolve) => setTimeout(resolve, Math.random() * 120000)
+                    // setTimeout(resolve, Math.random() * 5000)
+                );
+                const audience = me.root.peopleWhoCanSeeMyContent;
+                const interactors = me.root.peopleWhoCanInteractWithMe;
+                if (!audience || !interactors) return;
+
+                console.log("Posting twit ", i);
+
+                const twit = audience.createMap<Twit>({
+                    text: "Hello world " + i,
+                    likes: interactors.createStream<LikeStream>().id,
+                    replies: interactors.createStream<ReplyStream>().id,
+                });
+
+                me.profile?.twits?.prepend(twit?.id as Twit["id"]);
+
+                allTwits = allTwits?.prepend(twit.id);
+            }
+        }
+    );
+
+    let blackHole = 0;
+
+    let lastUpdate = Date.now();
+
+    autoSub(ALL_TWEETS_LIST_ID, node, (allTwits) => {
+        if (Date.now() - lastUpdate < 33) return;
+        lastUpdate = Date.now();
+        // console.log("All twits updated", new Date());
+
+        // console.log(allTwits
+        //     ?.slice(0, 20)
+        //     .map(
+        //         (twit) =>
+        //             twit?.text +
+        //             "/" +
+        //             twit?.meta.edits.text?.by?.profile?.name
+        //     )
+        //     .length, allTwits?.length);
+
+        blackHole +=
+            allTwits
+                ?.slice(0, 20)
+                .map(
+                    (twit) =>
+                        twit?.text +
+                        "/" +
+                        twit?.meta.edits.text?.by?.profile?.name
+                ).length || 0;
+    });
+}
+
+for (let i = 0; i < 50; i++) {
+    runner();
+}

examples/twit-stresstest/newAllTweets.ts

@@ -0,0 +1,18 @@
+import { ControlledAccount, LocalNode, cojsonReady } from "cojson";
+import {
+    ListOfTwits,
+    migration,
+} from "../twit/src/1_dataModel";
+import { createOrResumeWorker, autoSub } from "jazz-nodejs"
+
+
+const { localNode: node, worker } = await createOrResumeWorker({
+    workerName: "TwitAllTwitsCreator",
+    migration
+});
+
+const allTweetsGroup = worker.createGroup();
+allTweetsGroup.addMember('everyone', 'writer');
+
+const allTweets = allTweetsGroup.createList<ListOfTwits>();
+console.log("allTweets", allTweets.id);

examples/twit-stresstest/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "twit-stresstest",
+  "version": "0.2.0",
+  "main": "dist/twit-stresstest/index.js",
+  "type": "module",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "jazz-nodejs": "^0.6.0"
+  },
+  "scripts": {
+    "build": "rm -rf ./dist && tsc --sourceMap --outDir dist",
+    "stress4": "npx concurrently \"bun --inspect index.ts\" \"bun index.ts\" \"bun index.ts\" \"bun index.ts\"",
+    "stress8": "npx concurrently \"bun --inspect index.ts\" \"bun index.ts\" \"bun index.ts\" \"bun index.ts\" \"bun index.ts\" \"bun index.ts\" \"bun index.ts\" \"bun index.ts\"",
+    "stress8-built": "npx concurrently \"node dist/twit-stresstest/index.js\" \"node dist/twit-stresstest/index.js\" \"node dist/twit-stresstest/index.js\" \"node dist/twit-stresstest/index.js\" \"node dist/twit-stresstest/index.js\" \"node dist/twit-stresstest/index.js\" \"node dist/twit-stresstest/index.js\" \"node dist/twit-stresstest/index.js\""
+  }
+}

examples/twit-stresstest/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "strict": true,
+    "downlevelIteration": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+  },
+  "include": ["./index.ts"],
+}

examples/twit/CHANGELOG.md

@@ -0,0 +1,14 @@
+# jazz-example-twit
+
+## 0.1.0
+
+### Minor Changes
+
+- Adding a lot of performance improvements to cojson, add a stresstest for the twit example and make that run smoother in a lot of ways.
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.5.0
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/twit/job-template.nomad

@@ -3,7 +3,7 @@ job "twit$BRANCH_SUFFIX" {
   datacenters = ["*"]
 
   group "static" {
-    count = 8
+    count = 4
 
     network {
       port "http" {

examples/twit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-twit",
   "private": true,
-  "version": "0.0.8",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,13 +18,14 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "javascript-time-ago": "^2.5.9",
-    "jazz-browser-media-images": "^0.4.9",
-    "jazz-react": "^0.4.8",
-    "jazz-react-auth-local": "^0.4.8",
+    "jazz-browser-media-images": "^0.5.0",
+    "jazz-react": "^0.5.0",
+    "jazz-react-auth-local": "^0.4.16",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.5.2",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
     "react-time-ago": "^7.2.1",

examples/twit/src/1_dataModel.ts

@@ -29,36 +29,30 @@ export type TwitProfile = Profile<
 >;
 
 export type TwitAccountRoot = CoMap<{
-  peopleWhoCanSeeMyTwits: Group['id'];
-  peopleWhoCanSeeMyFollows: Group['id'];
-  peopleWhoCanFollowMe: Group['id'];
+  peopleWhoCanSeeMyContent: Group['id'];
   peopleWhoCanInteractWithMe: Group['id'];
 }>;
 
+export const ALL_TWEETS_LIST_ID = "co_zQEhxDTvZt3f4vWKqVNj9TCTRs4" as ListOfTwits['id'];
+
 export const migration: AccountMigration<TwitProfile, TwitAccountRoot> = (account, profile) => {
   if (!account.get('root')) {
-    const peopleWhoCanSeeMyTwits = account.createGroup();
-    const peopleWhoCanSeeMyFollows = account.createGroup();
-    const peopleWhoCanFollowMe = account.createGroup();
+    const peopleWhoCanSeeMyContent = account.createGroup();
     const peopleWhoCanInteractWithMe = account.createGroup();
 
-    peopleWhoCanFollowMe?.addMember(EVERYONE, 'writer');
-    peopleWhoCanSeeMyTwits?.addMember(EVERYONE, 'reader');
-    peopleWhoCanSeeMyFollows?.addMember(EVERYONE, 'reader');
+    peopleWhoCanSeeMyContent?.addMember(EVERYONE, 'reader');
     peopleWhoCanInteractWithMe?.addMember(EVERYONE, 'writer');
 
     const root = account.createMap<TwitAccountRoot>({
-      peopleWhoCanSeeMyTwits: peopleWhoCanSeeMyTwits.id,
-      peopleWhoCanSeeMyFollows: peopleWhoCanSeeMyFollows.id,
-      peopleWhoCanFollowMe: peopleWhoCanFollowMe.id,
+      peopleWhoCanSeeMyContent: peopleWhoCanSeeMyContent.id,
       peopleWhoCanInteractWithMe: peopleWhoCanInteractWithMe.id
     });
 
     account.set('root', root.id);
 
-    profile.set('twits', peopleWhoCanSeeMyTwits.createList<ListOfTwits>().id, 'trusting');
-    profile.set('following', peopleWhoCanSeeMyFollows.createList<ListOfProfiles>().id, 'trusting');
-    profile.set('followers', peopleWhoCanFollowMe.createStream<StreamOfFollowers>().id, 'trusting');
+    profile.set('twits', peopleWhoCanSeeMyContent.createList<ListOfTwits>().id, 'trusting');
+    profile.set('following', peopleWhoCanSeeMyContent.createList<ListOfProfiles>().id, 'trusting');
+    profile.set('followers', peopleWhoCanInteractWithMe.createStream<StreamOfFollowers>().id, 'trusting');
     console.log('MIGRATION SUCCESSFUL!');
   }
 };

examples/twit/src/2_main.tsx

@@ -1,37 +1,33 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider, createHashRouter } from 'react-router-dom';
 import './index.css';
 
 import { AccountMigration } from 'cojson';
-import { WithJazz, useJazz } from 'jazz-react';
-import { LocalAuth } from 'jazz-react-auth-local';
+import { DemoAuth, WithJazz, useJazz } from 'jazz-react';
 
 import { Button, ThemeProvider, TitleAndLogo } from './basicComponents/index.tsx';
-import { PrettyAuthUI } from './components/Auth.tsx';
 
 import { migration } from './1_dataModel.ts';
-import { ChronoFeed } from './3_ChronoFeed.tsx';
+import { AllTwitsFeed, FollowingFeed } from './3_ChronoFeed.tsx';
 import { ProfilePage } from './5_ProfilePage.tsx';
 
 const appName = 'Jazz Twit Example';
 
-const auth = LocalAuth({
-  appName,
-  Component: PrettyAuthUI
+const auth = DemoAuth({
+  appName
 });
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+  // <React.StrictMode>
+  <WithJazz auth={auth} migration={migration as AccountMigration}>
     <ThemeProvider>
       <TitleAndLogo name={appName} />
       <div className="flex flex-col h-full items-stretch justify-start gap-10 pt-10 pb-10 px-5 w-full max-w-xl mx-auto">
-        <WithJazz auth={auth} migration={migration as AccountMigration}>
-          <App />
-        </WithJazz>
+        <App />
       </div>
     </ThemeProvider>
-  </React.StrictMode>
+  </WithJazz>
+  // </React.StrictMode>
 );
 
 function App() {
@@ -40,7 +36,11 @@ function App() {
   const router = createHashRouter([
     {
       path: '/',
-      element: <ChronoFeed />
+      element: <AllTwitsFeed />
+    },
+    {
+      path: '/following',
+      element: <FollowingFeed />
     },
     {
       path: '/:profileId',
@@ -58,6 +58,9 @@ function App() {
         <Button onClick={() => router.navigate('/')} variant="link" className="-ml-3">
           Home
         </Button>
+        <Button onClick={() => router.navigate('/following')} variant="link" className="-ml-3">
+          Following
+        </Button>
         <Button onClick={() => router.navigate('/me')} variant="link" className="ml-auto">
           My Profile
         </Button>

examples/twit/src/3_ChronoFeed.tsx

@@ -1,11 +1,38 @@
-import { useMemo } from 'react';
-import { useJazz } from 'jazz-react';
-import { TwitAccountRoot, TwitProfile } from './1_dataModel.ts';
+import { useEffect, useMemo, useState } from 'react';
+import { useAutoSub, useJazz } from 'jazz-react';
+import { ALL_TWEETS_LIST_ID, TwitAccountRoot, TwitProfile } from './1_dataModel.ts';
 import { CreateTwitForm } from './6_CreateTwitForm.tsx';
 import { TwitComponent } from './4_TwitComponent.tsx';
-import { MainH1 } from './basicComponents/index.tsx';
+import { LazyLoadRow, MainH1 } from './basicComponents/index.tsx';
 
-export function ChronoFeed() {
+export function AllTwitsFeed() {
+  const allTwits = useAutoSub(ALL_TWEETS_LIST_ID);
+
+  const [animate, setAnimate] = useState(false);
+
+  useEffect(() => {
+    if (!animate && allTwits?.length) {
+      setTimeout(() => setAnimate(true), 1000);
+    }
+  }, [allTwits, animate])
+
+  return (
+    <div className="flex flex-col items-stretch">
+      <CreateTwitForm className="mb-10" />
+      <MainH1>
+        All {allTwits?.length} Twits{' '}
+        <span className="text-sm">
+          {allTwits?.mapDeferred(({ loaded }) => loaded).filter(l => l).length || 0} loaded
+        </span>
+      </MainH1>
+      {allTwits?.mapDeferred(twit => (
+        <LazyLoadRow key={twit.id} animate={animate}>{() => <TwitComponent twit={twit.value()} />}</LazyLoadRow>
+      ))}
+    </div>
+  );
+}
+
+export function FollowingFeed() {
   const { me } = useJazz<TwitProfile, TwitAccountRoot>();
 
   const myTwits = me.profile?.twits;

examples/twit/src/4_TwitComponent.tsx

@@ -13,6 +13,7 @@ import {
   TwitHeader,
   TwitBody,
   TwitText,
+  Placeholder,
 } from './basicComponents/index.tsx';
 import { Twit, TwitProfile } from './1_dataModel.ts';
 import { BrowserImage } from 'jazz-browser-media-images';
@@ -32,49 +33,53 @@ export function TwitComponent({
   const posterProfile = twit?.meta.edits.text?.by?.profile as Resolved<TwitProfile> | undefined;
   const isTopLevel = !twit?.isReplyTo || alreadyInReplies;
 
+  const loadReactions = !!posterProfile?.name;
+
   return (
     <TwitWithRepliesContainer isTopLevel={isTopLevel}>
       <TwitContainer>
         <ProfilePicImg
           src={posterProfile?.avatar?.as(BrowserImage)?.highestResSrcOrPlaceholder}
-          linkTo={'/' + posterProfile?.id}
+          linkTo={posterProfile?.id && ('/' + posterProfile.id)}
           initial={posterProfile?.name[0]}
           size={twit?.isReplyTo && "sm"}
         />
 
         <TwitBody>
           <TwitHeader>
-            <Link to={'/' + posterProfile?.id} className="font-bold hover:underline">
-              {posterProfile?.name}
-            </Link>
+            {posterProfile ? <Link to={'/' + posterProfile.id} className="font-bold hover:underline">
+              {posterProfile.name}
+            </Link> : <Placeholder/>}
+            {/* <div className='ml-2 text-xs text-neutral-200 dark:text-neutral-800'>{twit?.id}</div> */}
             <SubtleRelativeTimeAgo dateTime={twit?.meta.edits.text?.at} />
           </TwitHeader>
 
           <TwitText style={posterProfile?.twitStyle}>
-            {/* This is where the tweet text goes */}
-            {twit?.text}
+            {twit?.text || <Placeholder/>}
           </TwitText>
 
           {twit?.images && (
             <TwitImgGallery>
-              {twit.images.map(image => (
-                <TwitImg src={image?.as(BrowserImage)?.highestResSrcOrPlaceholder} key={image?.id} />
+              {twit.images.map((image, idx) => (
+                <TwitImg src={image?.as(BrowserImage)?.highestResSrcOrPlaceholder} key={image?.id || idx} />
               ))}
             </TwitImgGallery>
           )}
 
           <ReactionsContainer>
             <ButtonWithCount
-              active={twit?.likes?.me?.last === '❤️'}
+              active={loadReactions && (twit?.likes?.me?.last === '❤️')}
               onClick={() => twit?.likes?.push(twit?.likes?.me?.last ? null : '❤️')}
-              count={twit?.likes?.perAccount.filter(([, liked]) => liked.last === '❤️').length || 0}
+              count={loadReactions && (twit?.likes?.perAccount.filter(([, liked]) => liked.last === '❤️').length) || 0}
               icon={<HeartIcon size="18" />}
               activeIcon={<HeartIcon color="red" size="18" fill="red" />}
+              disabled={!loadReactions || !twit?.likes?.perAccount}
             />
             <ButtonWithCount
               onClick={() => setShowReplyForm(s => !s)}
-              count={twit?.replies?.perAccount.flatMap(([, byAccount]) => byAccount.all).length || 0}
+              count={loadReactions && (twit?.replies?.perAccount.flatMap(([, byAccount]) => byAccount.all).length) || 0}
               icon={<MessagesSquareIcon size="18" />}
+              disabled={!loadReactions || !twit?.replies?.perAccount}
             />
           </ReactionsContainer>
         </TwitBody>
@@ -89,7 +94,7 @@ export function TwitComponent({
           />
         )}
 
-        {twit?.replies?.perAccount
+        {loadReactions && twit?.replies?.perAccount
           .flatMap(([, byAccount]) => byAccount.all)
           .sort((a, b) => b.at.getTime() - a.at.getTime())
           .map(replyEntry => (

examples/twit/src/5_ProfilePage.tsx

@@ -39,7 +39,7 @@ export function ProfilePage() {
           ? null
           : twit?.isReplyTo
         : twit
-    );
+    ) || [];
   }, [profile?.twits]);
 
   const [qr, setQr] = useState<string>('');
@@ -64,8 +64,8 @@ export function ProfilePage() {
           {isMe && (
             <ChooseProfilePicInput
               onChange={(file: File) =>
-                me.root?.peopleWhoCanSeeMyTwits &&
-                createImage(file, me.root.peopleWhoCanSeeMyTwits, 256).then(image => {
+                me.root?.peopleWhoCanSeeMyContent &&
+                createImage(file, me.root.peopleWhoCanSeeMyContent, 256).then(image => {
                   me.profile?.set({ avatar: image.id }, 'trusting');
                 })
               }

examples/twit/src/6_CreateTwitForm.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
-import { Resolved, useJazz } from 'jazz-react';
+import { Resolved, useJazz, useSyncedValue } from 'jazz-react';
 import { AddTwitPicsInput, TwitImg, TwitTextInput } from './basicComponents/index.tsx';
-import { LikeStream, ListOfImages, ReplyStream, Twit, TwitAccountRoot, TwitProfile } from './1_dataModel.ts';
+import { ALL_TWEETS_LIST_ID, LikeStream, ListOfImages, ReplyStream, Twit, TwitAccountRoot, TwitProfile } from './1_dataModel.ts';
 import { createImage } from 'jazz-browser-media-images';
 
 export function CreateTwitForm(
@@ -12,12 +12,13 @@ export function CreateTwitForm(
   } = {}
 ) {
   const { me } = useJazz<TwitProfile, TwitAccountRoot>();
+  const allTwits = useSyncedValue(ALL_TWEETS_LIST_ID);
 
   const [pics, setPics] = React.useState<File[]>([]);
 
   const onSubmit = useCallback(
     (twitText: string) => {
-      const audience = me.root?.peopleWhoCanSeeMyTwits;
+      const audience = me.root?.peopleWhoCanSeeMyContent;
       const interactors = me.root?.peopleWhoCanInteractWithMe;
       if (!audience || !interactors) return;
 
@@ -29,19 +30,25 @@ export function CreateTwitForm(
 
       me.profile?.twits?.prepend(twit?.id as Twit['id']);
 
+      if (!props.inReplyTo) {
+        allTwits?.prepend(twit.id);
+      }
+
       if (props.inReplyTo) {
         props.inReplyTo.replies?.push(twit.id);
         twit.set({ isReplyTo: props.inReplyTo.id });
       }
 
-      Promise.all(pics.map(pic => createImage(pic, twit.group, 1024))).then(createdPics => {
-        twit.set({ images: audience.createList<ListOfImages>(createdPics.map(pic => pic.id)).id });
-      });
+      if (pics.length > 0) {
+        Promise.all(pics.map(pic => createImage(pic, twit.group, 1024))).then(createdPics => {
+          twit.set({ images: audience.createList<ListOfImages>(createdPics.map(pic => pic.id)).id });
+        });
+      }
 
       setPics([]);
       props.onSubmit?.();
     },
-    [me.profile?.twits, me.root?.peopleWhoCanSeeMyTwits, me.root?.peopleWhoCanInteractWithMe, props, pics]
+    [me.profile?.twits, me.root?.peopleWhoCanSeeMyContent, me.root?.peopleWhoCanInteractWithMe, props, pics, allTwits]
   );
 
   const [picPreviews, setPicPreviews] = React.useState<string[]>([]);

examples/twit/src/7_FollowStuff.tsx

@@ -25,7 +25,7 @@ export function FollowButton({ profile }: { profile?: Resolved<TwitProfile> }) {
   return profile?.id === me.profile?.id ? (
     <div className="ml-auto text-neutral-500">That's you!</div>
   ) : (
-    <Button onClick={followOrUnfollow} className="ml-auto" variant={alreadyFollowing ? 'ghost' : 'default'}>
+    <Button onClick={followOrUnfollow} className="ml-auto" disabled={!profile?.followers || !me.profile?.following} variant={alreadyFollowing ? 'ghost' : 'default'}>
       {alreadyFollowing ? 'Unfollow' : theyFollowMe ? 'Follow Back' : 'Follow'}
     </Button>
   );

examples/twit/src/basicComponents/index.tsx

@@ -17,6 +17,8 @@ export { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
 
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en.json';
+import { useInView } from 'react-intersection-observer';
+import { useEffect, useState } from 'react';
 TimeAgo.addDefaultLocale(en);
 
 export function BioInput(props: { value?: string; onChange: (value: string) => void }) {
@@ -53,7 +55,7 @@ export function ChooseProfilePicInput(props: { onChange: (file: File) => void })
         Choose Pic
         <Input
           type="file"
-          accept="image/*"
+          accept="image/jpg,image/jpeg,image/png,image/gif"
           onChange={e => {
             e.target.files?.[0] && props.onChange(e.target.files[0]);
             e.target.value = '';
@@ -72,14 +74,17 @@ export function ProfilePicImg(props: { src?: string; size?: 'sm' | 'xxl'; linkTo
         <img
           src={props.src}
           className={
-            'bg-neutral-200 rounded-full mr-2 object-cover shrink-0' +
+            'bg-neutral-200 dark:bg-neutral-800 rounded-full mr-2 object-cover shrink-0' +
             (props.size === 'sm' ? ' w-8 h-8' : props.size === 'xxl' ? ' w-20 h-20' : ' w-10 h-10')
           }
         />
       ) : (
         <div
           className={
-            'bg-neutral-200 rounded-full mr-2 object-cover shrink-0 flex items-center justify-center text-neutral-700 ' +
+            'rounded-full mr-2 object-cover shrink-0 flex items-center justify-center text-neutral-700 dark:text-neutral-300 ' +
+            (props.initial
+              ? 'bg-neutral-200 dark:bg-neutral-800 '
+              : 'animate-pulse bg-neutral-100 dark:bg-neutral-900 ') +
             (props.size === 'sm'
               ? ' w-8 h-8 text-[1.5rem]'
               : props.size === 'xxl'
@@ -97,13 +102,17 @@ export function ProfilePicImg(props: { src?: string; size?: 'sm' | 'xxl'; linkTo
 export function SubtleRelativeTimeAgo(props: { dateTime?: Date }) {
   return (
     <div className="ml-auto text-neutral-300 text-xs whitespace-nowrap">
-      <ReactTimeAgo date={props.dateTime || 0} />
+      {props.dateTime ? <ReactTimeAgo date={props.dateTime} timeStyle="round"/> : <Placeholder />}
     </div>
   );
 }
 
 export function TwitImg(props: { src?: string }) {
-  return <img src={props.src} className="h-40 rounded object-cover" />;
+  return props.src ? (
+    <img src={props.src} className="h-40 rounded object-cover" />
+  ) : (
+    <div className="h-40 w-30 rounded bg-neutral-100" />
+  );
 }
 
 export function ReactionsContainer(props: { children: React.ReactNode }) {
@@ -120,18 +129,20 @@ export function ButtonWithCount(props: {
   active?: boolean;
   icon: React.ReactNode;
   activeIcon?: React.ReactNode;
+  disabled?: boolean;
 }) {
   return (
     <div className="flex items-center">
       <Button
-        className="w-10 h-7 p-1 mr-1"
+        className={"w-10 h-7 p-1 mr-1 " + (props.disabled ? "text-neutral-200 dark:text-neutral-800" : "")}
         variant={props.active ? 'secondary' : 'outline'}
         onClick={props.onClick}
         size="icon"
+        disabled={props.disabled}
       >
         {props.active ? props.activeIcon : props.icon}
       </Button>{' '}
-      <span className="tabular-nums">{props.count}</span>
+      <span className={"tabular-nums " + (props.disabled ? "text-neutral-200 dark:text-neutral-800" : "")}>{props.count}</span>
     </div>
   );
 }
@@ -174,7 +185,7 @@ export function AddTwitPicsInput(props: { onChange: (files: File[]) => void }) {
             props.onChange(Array.from(e.target.files || []));
           }}
           className="hidden"
-          accept="image/*"
+          accept="image/jpg,image/jpeg,image/png,image/gif"
           multiple
         />
       </label>
@@ -203,7 +214,7 @@ export function TwitHeader(props: { children: React.ReactNode }) {
 }
 
 export function TwitImgGallery(props: { children: React.ReactNode }) {
-  return <div className="flex gap-2 mt-2 max-w-full overflow-auto">{props.children}</div>;
+  return <div className="flex gap-2 mt-2 max-w-full overflow-auto">{props.children || <TwitImg />}</div>;
 }
 
 export function TwitText(props: { children: React.ReactNode; style?: React.CSSProperties }) {
@@ -215,14 +226,40 @@ export function QuoteContainer(props: { children: React.ReactNode }) {
 }
 
 export function MainH1(props: { children: React.ReactNode }) {
-  return <h1 className="text-2xl mb-4">{props.children}</h1>;
+  return <h1 className="text-2xl mb-4 sticky top-0 p-4 -mx-4 bg-background z-20">{props.children}</h1>;
 }
 
 export function SmallInlineButton(props: { children: React.ReactNode } & ButtonProps) {
-  const {children, ...rest} = props
+  const { children, ...rest } = props;
   return (
     <Button variant={'ghost'} className="h-6 px-1 -mx-1" {...rest}>
       {children}
     </Button>
   );
 }
+
+export function Placeholder() {
+  return (
+    <span className="bg-neutral-100 dark:bg-neutral-900 rounded animate-pulse text-transparent">
+      Loading, loading...
+    </span>
+  );
+}
+
+export function LazyLoadRow(props: { children: () => React.ReactNode, animate?: boolean }) {
+  const { ref, inView } = useInView({
+    // triggerOnce: true,
+    delay: 100,
+  });
+  const [height, setHeight] = useState(props.animate ? "0": "500px");
+  useEffect(() => {
+    setHeight("500px")
+  },[])
+  return (
+    <div ref={ref} style={{
+      maxHeight: height,
+      overflowX: "scroll",
+      transition: 'max-height 1s ease-in-out',
+    }}>{inView ? props.children() : <div className="mb-[1px] h-28 bg-neutral-50 dark:bg-neutral-950" />}</div>
+  );
+}

genDocsMd.ts

@@ -0,0 +1,695 @@
+import { readFile, writeFile } from "fs/promises";
+import { Application, JSONOutput, ReflectionKind } from "typedoc";
+import { manuallyIgnore, indentEnd, indent } from "./generateDocs";
+
+export async function genDocsMd() {
+    const packageDocs = Object.entries({
+        "jazz-react": "index.tsx",
+        cojson: "index.ts",
+        "jazz-browser": "index.ts",
+        "jazz-browser-media-images": "index.ts",
+        "jazz-autosub": "index.ts",
+        "jazz-nodejs": "index.ts",
+    }).map(async ([packageName, entryPoint]) => {
+        const app = await Application.bootstrapWithPlugins({
+            entryPoints: [`packages/${packageName}/src/${entryPoint}`],
+            tsconfig: `packages/${packageName}/tsconfig.json`,
+            sort: ["required-first"],
+            groupOrder: ["Functions", "Classes", "TypeAliases", "Namespaces"],
+            categorizeByGroup: false,
+        });
+
+        const project = await app.convert();
+
+        if (!project) {
+            throw new Error("Failed to convert project" + packageName);
+        }
+        // Alternatively generate JSON output
+        await app.generateJson(project, `docsTmp/${packageName}.json`);
+
+        const docs = JSON.parse(
+            await readFile(`docsTmp/${packageName}.json`, "utf8")
+        ) as JSONOutput.ProjectReflection;
+
+        return (
+            `# ${packageName}\n\n` +
+            docs
+                .groups!.map((group) => {
+                    return group.children
+                        ?.flatMap((childId) => {
+                            const child = docs.children!.find(
+                                (child) => child.id === childId
+                            )!;
+
+                            if (manuallyIgnore.has(child.name) ||
+                                child.comment?.blockTags?.some(
+                                    (tag) => tag.tag === "@deprecated" ||
+                                        tag.tag === "@internal" ||
+                                        tag.tag === "@ignore"
+                                ) ||
+                                child.signatures?.every((signature) => signature.comment?.blockTags?.some(
+                                    (tag) => tag.tag === "@deprecated" ||
+                                        tag.tag === "@internal" ||
+                                        tag.tag === "@ignore"
+                                )
+                                )) {
+                                return [];
+                            }
+
+                            return (
+                                `## \`${renderChildName(
+                                    child
+                                )}\`\n\n<sup>(${group.title
+                                    .toLowerCase()
+                                    .replace("bles", "ble")
+                                    .replace("ces", "ce")
+                                    .replace(/es$/, "")
+                                    .replace(
+                                        "ns",
+                                        "n"
+                                    )} in \`${packageName}\`)</sup>\n\n` +
+                                renderChildType(child) +
+                                (child.kind === ReflectionKind.Class ||
+                                    child.kind === ReflectionKind.Interface ||
+                                    child.kind === ReflectionKind.Namespace
+                                    ? renderSummary(child.comment) +
+                                    renderExamples(child.comment) +
+                                    (child.categories || child.groups)
+                                        ?.map((category) => renderChildCategory(
+                                            child,
+                                            category
+                                        )
+                                        )
+                                        .join("<br/>\n\n")
+                                    : child.kind === ReflectionKind.Function
+                                        ? renderSummary(
+                                            child.signatures?.[0].comment
+                                        ) +
+                                        renderParamComments(
+                                            child.signatures?.[0].parameters || []
+                                        ) +
+                                        renderExamples(
+                                            child.signatures?.[0].comment
+                                        ) +
+                                        "\n\n"
+                                        : "TODO: doc generator not implemented yet " +
+                                        child.kind)
+                            );
+                        })
+                        .join("\n\n----\n\n");
+                })
+                .join("\n\n----\n\n")
+        );
+
+        function renderSummary(comment?: JSONOutput.Comment): string {
+            if (comment) {
+                return (
+                    comment.summary
+                        .map((token) => token.kind === "text" || token.kind === "code"
+                            ? token.text
+                            : ""
+                        )
+                        .join("") +
+                    "\n\n" +
+                    "\n\n"
+                );
+            } else {
+                return "TODO: document\n\n";
+            }
+        }
+
+        function renderExamples(comment?: JSONOutput.Comment): string {
+            return (comment?.blockTags || [])
+                .map((blockTag) => blockTag.tag === "@example"
+                    ? "##### Example:\n\n" +
+                    blockTag.content
+                        .map((token) => token.kind === "text" || token.kind === "code"
+                            ? token.text
+                            : ""
+                        )
+                        .join("") +
+                    "\n\n"
+                    : ""
+                )
+                .join("");
+        }
+
+        function renderParamComments(params: JSONOutput.ParameterReflection[]) {
+            const paramDocs = params.flatMap((param) => {
+                if (param.type?.type === "reflection") {
+                    return param.type.declaration.children?.flatMap((child) => {
+                        if (child.name === "children" &&
+                            child.type?.type === "reference" &&
+                            child.type?.name === "ReactNode") {
+                            return [];
+                        }
+                        return (
+                            `| \`${param.name}.${child.name}${child.flags.isOptional || child.defaultValue
+                                ? "?"
+                                : ""}\` | ` +
+                            (child.comment
+                                ? child.comment.summary
+                                    .map((token) => token.kind === "text" ||
+                                        token.kind === "code"
+                                        ? token.text
+                                        : ""
+                                    )
+                                    .join("")
+                                : "TODO: document") +
+                            " |"
+                        );
+                    });
+                } else {
+                    const comment = param.comment;
+                    return [
+                        `| \`${param.name}${param.flags.isOptional || param.defaultValue
+                            ? "?"
+                            : ""}\` | ` +
+                        (comment
+                            ? comment.summary
+                                .map((token) => token.kind === "text" ||
+                                    token.kind === "code"
+                                    ? token.text
+                                    : ""
+                                )
+                                .join("")
+                            : "TODO: document ") +
+                        " |",
+                    ];
+                }
+            });
+
+            if (paramDocs.length) {
+                return `### Parameters:\n\n| name | description |\n| ----: | ---- |\n${paramDocs.join(
+                    "\n"
+                )}\n\n`;
+            }
+        }
+
+        function renderChildName(child: JSONOutput.DeclarationReflection) {
+            if (child.signatures) {
+                if (child.signatures[0].type?.type === "reference" &&
+                    child.signatures[0].type.qualifiedName ===
+                    "React.JSX.Element") {
+                    return `<${child.name}/>`;
+                } else {
+                    return (
+                        child.name +
+                        `(${(child.signatures[0].parameters || [])
+                            .map(renderParamSimple)
+                            .join(", ")})`
+                    );
+                }
+            } else {
+                return child.name;
+            }
+        }
+
+        function renderChildType(
+            child: JSONOutput.DeclarationReflection
+        ): string {
+            const isClass = child.kind === ReflectionKind.Class;
+            const isTypeAlias = child.kind === ReflectionKind.TypeAlias;
+            const isInterface = child.kind === ReflectionKind.Interface;
+            const isNamespace = child.kind === ReflectionKind.Namespace;
+            const isFunction = !!child.signatures;
+
+            const kind = isClass
+                ? "class"
+                : isTypeAlias
+                    ? "type"
+                    : isFunction
+                        ? "function"
+                        : isInterface
+                            ? "interface"
+                            : isNamespace
+                                ? "namespace"
+                                : "";
+
+            return (
+                "```typescript\n" +
+                `export ${kind} ${child.name}` +
+                (child.typeParameters || child.signatures?.[0].typeParameter
+                    ? "<" +
+                    (
+                        child.typeParameters ||
+                        child.signatures?.[0].typeParameter ||
+                        []
+                    )
+                        .map(renderTypeParam)
+                        .join(", ") +
+                    ">"
+                    : "") +
+                (child.extendedTypes
+                    ? " extends " +
+                    child.extendedTypes.map(renderType).join(", ")
+                    : "") +
+                (child.implementedTypes
+                    ? " implements " +
+                    child.implementedTypes.map(renderType).join(", ")
+                    : "") +
+                (isClass || isInterface || isNamespace
+                    ? " {...}"
+                    : isTypeAlias
+                        ? ` = ${renderType(child.type)}`
+                        : child.signatures
+                            ? `(${(child.signatures[0].parameters || [])
+                                .map(renderParam)
+                                .join(", ")}): ${renderType(
+                                    child.signatures[0].type
+                                )}`
+                            : "") +
+                "\n```\n"
+            );
+        }
+
+        function renderChildCategory(
+            child: JSONOutput.DeclarationReflection,
+            category: JSONOutput.ReflectionGroup
+        ): string {
+            return (
+                `### \`${child.name}\`: ${category.title.replace(
+                    /[^d]+\./,
+                    ""
+                )}\n\n` +
+                category.children
+                    ?.map((memberId) => {
+                        const member = child.children!.find(
+                            (member) => member.id === memberId
+                        )!;
+
+                        if (member.kind === 2048 || member.kind === 512) {
+                            if (member.signatures?.every(
+                                (sig) => sig.comment?.modifierTags?.includes(
+                                    "@internal"
+                                ) ||
+                                    sig.comment?.modifierTags?.includes(
+                                        "@deprecated"
+                                    )
+                            )) {
+                                return "";
+                            } else {
+                                return documentConstructorOrMethod(
+                                    member,
+                                    child
+                                );
+                            }
+                        } else if (member.kind === 1024 ||
+                            member.kind === 262144) {
+                            if (member.comment?.modifierTags?.includes(
+                                "@internal"
+                            ) ||
+                                member.comment?.modifierTags?.includes(
+                                    "@deprecated"
+                                )) {
+                                return "";
+                            } else {
+                                return documentProperty(member, child);
+                            }
+                        } else if (member.kind === 2097152) {
+                            if (member.comment?.modifierTags?.includes(
+                                "@internal"
+                            ) ||
+                                member.comment?.modifierTags?.includes(
+                                    "@deprecated"
+                                )) {
+                                return "";
+                            } else {
+                                return documentProperty(
+                                    { ...member, flags: { isStatic: true } },
+                                    child
+                                );
+                            }
+                        } else {
+                            return "Unknown member kind " + member.kind;
+                        }
+                    })
+                    .join("\n\n")
+            );
+        }
+
+        function renderType(t?: JSONOutput.SomeType): string {
+            if (!t) return "";
+            if (t.type === "reference") {
+                return (
+                    t.name +
+                    (t.typeArguments
+                        ? "<" + t.typeArguments.map(renderType).join(", ") + ">"
+                        : "")
+                );
+            } else if (t.type === "intrinsic") {
+                return t.name;
+            } else if (t.type === "literal") {
+                return JSON.stringify(t.value);
+            } else if (t.type === "union") {
+                const seen = new Set<string>();
+                return t.types
+                    .flatMap((t) => {
+                        const rendered = t.type === "intersection" || t.type === "union"
+                            ? `(${renderType(t)})`
+                            : renderType(t);
+
+                        if (seen.has(rendered)) {
+                            return [];
+                        } else {
+                            seen.add(rendered);
+                            return [rendered];
+                        }
+                    })
+                    .join(" | ");
+            } else if (t.type === "intersection") {
+                const seen = new Set<string>();
+                return t.types
+                    .flatMap((t) => {
+                        const rendered = t.type === "intersection" || t.type === "union"
+                            ? `(${renderType(t)})`
+                            : renderType(t);
+
+                        if (seen.has(rendered)) {
+                            return [];
+                        } else {
+                            seen.add(rendered);
+                            return [rendered];
+                        }
+                    })
+                    .join(" & ");
+            } else if (t.type === "indexedAccess") {
+                return (
+                    renderType(t.objectType) +
+                    "[" +
+                    renderType(t.indexType) +
+                    "]"
+                );
+            } else if (t.type === "reflection") {
+                if (t.declaration.indexSignature) {
+                    return (
+                        `{${t.declaration.children
+                            ? t.declaration.children
+                                .map(
+                                    (child) => `  ${child.name}${child.flags.isOptional
+                                            ? "?"
+                                            : ""}: ${indentEnd(
+                                                renderType(child.type)
+                                            )},`
+                                )
+                                .join("\n")
+                            : ""}\n  [` +
+                        t.declaration.indexSignature?.parameters?.[0].name +
+                        ": " +
+                        renderType(
+                            t.declaration.indexSignature?.parameters?.[0].type
+                        ) +
+                        "]: " +
+                        indentEnd(
+                            renderType(t.declaration.indexSignature?.type)
+                        ) +
+                        " }"
+                    );
+                } else if (t.declaration.children) {
+                    return `{\n${t.declaration.children
+                        .map((child) => child.signatures
+                            ? child.signatures
+                                .map(
+                                    (signature) => `  ${child.name}(${signature.parameters
+                                            ? "\n  " +
+                                            indent(
+                                                signature.parameters
+                                                    .map((p) => indentEnd(
+                                                        renderParam(
+                                                            p
+                                                        )
+                                                    )
+                                                    )
+                                                    .join(",\n  ")
+                                            ) +
+                                            "\n  )"
+                                            : "()"}: ${indentEnd(
+                                                renderType(signature.type)
+                                            )}`
+                                )
+                                .join("\n") + ",\n"
+                            : `  ${child.name}${child.flags.isOptional ? "?" : ""}: ${indentEnd(renderType(child.type))},\n`
+                        )
+                        .join("")}}`;
+                } else if (t.declaration.signatures) {
+                    return t.declaration.signatures
+                        .map(
+                            (signature) => `(${(signature.parameters || [])
+                                .map(renderParam)
+                                .join(", ")}) => ${renderType(
+                                    signature.type
+                                )}`
+                        )
+                        .join("\n");
+                } else {
+                    return "COMPLEX_TYPE_REFLECTION";
+                }
+            } else if (t.type === "array") {
+                return renderType(t.elementType) + "[]";
+            } else if (t.type === "tuple") {
+                return `[${t.elements?.map(renderType).join(", ")}]`;
+            } else if (t.type === "templateLiteral") {
+                const matchingNamedType = docs.children?.find(
+                    (child) => child.variant === "declaration" &&
+                        child.type?.type === "templateLiteral" &&
+                        child.type.head === t.head &&
+                        child.type.tail.every(
+                            (piece, i) => piece[1] === t.tail[i][1]
+                        )
+                );
+
+                if (matchingNamedType) {
+                    return matchingNamedType.name;
+                } else {
+                    if (t.head === "sealerSecret_z" &&
+                        t.tail[0][1] === "/signerSecret_z") {
+                        return "AgentSecret";
+                    } else if (t.head === "sealer_z" &&
+                        t.tail[0][1] === "/signer_z") {
+                        if (t.tail[1] && t.tail[1][1] === "_session_z") {
+                            return "SessionID";
+                        } else {
+                            return "AgentID";
+                        }
+                    } else {
+                        return (
+                            "`" +
+                            t.head +
+                            t.tail
+                                .map(
+                                    (bit) => "${" + renderType(bit[0]) + "}" + bit[1]
+                                )
+                                .join("") +
+                            "`"
+                        );
+                    }
+                }
+            } else if (t.type === "conditional") {
+                const trueRendered = renderType(t.trueType);
+                const falseRendered = renderType(t.falseType);
+
+                if (trueRendered.includes("\n") ||
+                    falseRendered.includes("\n")) {
+                    return (
+                        renderType(t.checkType) +
+                        " extends " +
+                        renderType(t.extendsType) +
+                        "\n  ? " +
+                        indentEnd(renderType(t.trueType)) +
+                        "\n  : " +
+                        indentEnd(renderType(t.falseType))
+                    );
+                } else {
+                    return (
+                        renderType(t.checkType) +
+                        " extends " +
+                        renderType(t.extendsType) +
+                        " ? " +
+                        renderType(t.trueType) +
+                        " : " +
+                        renderType(t.falseType)
+                    );
+                }
+            } else if (t.type === "inferred") {
+                return "infer " + t.name;
+            } else if (t.type === "typeOperator") {
+                return t.operator + " " + renderType(t.target);
+            } else if (t.type === "mapped") {
+                return `{\n  [${t.parameter} in ${renderType(
+                    t.parameterType
+                )}]: ${indentEnd(renderType(t.templateType))}\n}`;
+            } else {
+                return "COMPLEX_TYPE_" + t.type;
+            }
+        }
+
+        // function renderTemplateLiteral(tempLit: JSONOutput.TemplateLiteralType) {
+        //     return tempLit.head + tempLit.tail.map((piece) => piece[0] + piece[1]).join("");
+        // }
+        // function resolveTemplateLiteralPieceType(t: SomeType): string {
+        //     if (t.type === "string") {
+        //         return "${string}"
+        //     }
+        //     if (t.type === "reference") {
+        //         const referencedType = docs.children?.find(
+        //             (child) => child.name === t.name
+        //         );
+        //     }
+        // }
+        function renderTypeParam(
+            t?: JSONOutput.TypeParameterReflection
+        ): string {
+            if (!t) return "";
+            return t.name + (t.type ? " extends " + renderType(t.type) : "");
+        }
+
+        function renderParam(param: JSONOutput.ParameterReflection) {
+            return param.name === "__namedParameters"
+                ? renderType(param.type)
+                : `${param.name}: ${renderType(param.type)}`;
+        }
+
+        function renderParamSimple(param: JSONOutput.ParameterReflection) {
+            return param.name === "__namedParameters" &&
+                param.type?.type === "reflection"
+                ? `{${param.type?.declaration.children
+                    ?.map(
+                        (child) => child.name + (child.flags.isOptional ? "?" : "")
+                    )
+                    .join(", ")}}${param.flags.isOptional || param.defaultValue ? "?" : ""}`
+                : param.name +
+                (param.flags.isOptional || param.defaultValue ? "?" : "");
+        }
+
+        function documentConstructorOrMethod(
+            member: JSONOutput.DeclarationReflection,
+            child: JSONOutput.DeclarationReflection
+        ) {
+            const isInClass = child.kind === 128;
+            const isInTypeDef = child.kind === 2097152;
+            const isInInterface = child.kind === 256;
+            const isInNamespace = child.kind === 4;
+            const isInFunction = !!child.signatures;
+
+            const inKind = isInClass
+                ? "class"
+                : isInTypeDef
+                    ? "type"
+                    : isInFunction
+                        ? "function"
+                        : isInInterface
+                            ? "interface"
+                            : isInNamespace
+                                ? "namespace"
+                                : "";
+
+            const stem = member.name === "constructor"
+                ? "new " + child.name + "</code></b>"
+                : (member.flags.isStatic ? child.name : "") +
+                "." +
+                member.name +
+                "";
+
+            return member.signatures
+                ?.map((signature) => {
+                    return (
+                        `<details>\n<summary><b><code>${stem}(${(
+                            signature?.parameters?.map(renderParamSimple) || []
+                        ).join(", ")})</code></b> ${member.inheritedFrom
+                            ? "<sub><sup>from <code>" +
+                            member.inheritedFrom.name.split(".")[0] +
+                            "</code></sup></sub> "
+                            : ""} ${signature?.comment
+                            ? ""
+                            : "<sub><sup>(undocumented)</sup></sub>"}</summary>\n\n` +
+                        ("```typescript\n" +
+                            `${inKind} ${child.name}${child.typeParameters
+                                ? `<${child.typeParameters
+                                    .map((t) => t.name)
+                                    .join(", ")}>`
+                                : ""} {\n\n${indent(
+                                    `${member.name}${signature.typeParameter
+                                        ? `<${signature.typeParameter
+                                            .map(renderTypeParam)
+                                            .join(", ")}>`
+                                        : ""}(${(
+                                        signature.parameters?.map(
+                                            (param) => `\n  ${param.name}${param.flags.isOptional ||
+                                                    param.defaultValue
+                                                    ? "?"
+                                                    : ""}: ${indentEnd(
+                                                        renderType(param.type)
+                                                    )}${param.defaultValue
+                                                    ? ` = ${param.defaultValue}`
+                                                    : ""}`
+                                        ) || []
+                                    ).join(",") +
+                                    (signature.parameters?.length ? "\n" : "")}): ${renderType(signature.type)} {...}`
+                                )}\n\n}\n` +
+                            "```\n" +
+                            renderSummary(signature.comment)) +
+                        renderParamComments(signature.parameters || []) +
+                        renderExamples(signature.comment) +
+                        "</details>\n\n"
+                    );
+                })
+                .join("\n\n");
+        }
+
+        function documentProperty(
+            member: JSONOutput.DeclarationReflection,
+            child: JSONOutput.DeclarationReflection
+        ) {
+            const isInClass = child.kind === 128;
+            const isInTypeDef = child.kind === 2097152;
+            const isInInterface = child.kind === 256;
+            const isInNamespace = child.kind === 4;
+            const isInFunction = !!child.signatures;
+
+            const inKind = isInClass
+                ? "class"
+                : isInTypeDef
+                    ? "type"
+                    : isInFunction
+                        ? "function"
+                        : isInInterface
+                            ? "interface"
+                            : isInNamespace
+                                ? "namespace"
+                                : "";
+
+            const stem = member.flags.isStatic ? child.name : "";
+            return (
+                `<details>\n<summary><b><code>${stem}.${member.name}</code></b> ${member.inheritedFrom
+                    ? "<sub><sup>from <code>" +
+                    member.inheritedFrom.name.split(".")[0] +
+                    "</code></sup></sub> "
+                    : ""} ${member.comment ? "" : "<sub><sup>(undocumented)</sup></sub>"}</summary>\n\n` +
+                "```typescript\n" +
+                `${inKind} ${child.name}${child.typeParameters
+                    ? `<${child.typeParameters
+                        .map((t) => t.name)
+                        .join(", ")}>`
+                    : ""} {\n\n${indent(
+                        `${member.getSignature ? "get " : ""}${member.name}${member.getSignature ? "()" : ""}: ${renderType(member.type || member.getSignature?.type)}${member.getSignature ? " {...}" : ""}`
+                    )}` +
+                "\n\n}\n```\n" +
+                renderSummary(member.comment) +
+                renderExamples(member.comment) +
+                "</details>\n\n"
+            );
+        }
+    });
+
+    const docsContent = await readFile("./DOCS.md", "utf8");
+
+    await writeFile(
+        "./DOCS.md",
+        docsContent.slice(
+            0,
+            docsContent.indexOf("<!-- AUTOGENERATED DOCS AFTER THIS POINT -->")
+        ) +
+        "<!-- AUTOGENERATED DOCS AFTER THIS POINT -->\n" +
+        (await Promise.all(packageDocs)).join("\n\n\n")
+    );
+}

generateDocs.ts

@@ -1,783 +1,19 @@
-import { readFile, writeFile } from "fs/promises";
-import { Application, JSONOutput, ReflectionKind } from "typedoc";
+import { genDocsMd } from "./genDocsMd";
 
-const manuallyIgnore = new Set(["CojsonInternalTypes"]);
+export const manuallyIgnore = new Set(["CojsonInternalTypes"]);
 
 async function main() {
-    // Application.bootstrap also exists, which will not load plugins
-    // Also accepts an array of option readers if you want to disable
-    // TypeDoc's tsconfig.json/package.json/typedoc.json option readers
-    const packageDocs = Object.entries({
-        "jazz-react": "index.tsx",
-        cojson: "index.ts",
-        "jazz-browser": "index.ts",
-        "jazz-browser-media-images": "index.ts",
-        "jazz-autosub": "index.ts",
-    }).map(async ([packageName, entryPoint]) => {
-        const app = await Application.bootstrapWithPlugins({
-            entryPoints: [`packages/${packageName}/src/${entryPoint}`],
-            tsconfig: `packages/${packageName}/tsconfig.json`,
-            sort: ["required-first"],
-            groupOrder: ["Functions", "Classes", "TypeAliases", "Namespaces"],
-            categorizeByGroup: false
-        });
-
-        const project = await app.convert();
-
-        if (!project) {
-            throw new Error("Failed to convert project" + packageName);
-        }
-        // Alternatively generate JSON output
-        await app.generateJson(project, `docsTmp/${packageName}.json`);
-
-        const docs = JSON.parse(
-            await readFile(`docsTmp/${packageName}.json`, "utf8")
-        ) as JSONOutput.ProjectReflection;
-
-        return (
-            `# ${packageName}\n\n` +
-            docs
-                .groups!.map((group) => {
-                    return group.children
-                        ?.flatMap((childId) => {
-                            const child = docs.children!.find(
-                                (child) => child.id === childId
-                            )!;
-
-                            if (
-                                manuallyIgnore.has(child.name) ||
-                                child.comment?.blockTags?.some(
-                                    (tag) =>
-                                        tag.tag === "@deprecated" ||
-                                        tag.tag === "@internal" ||
-                                        tag.tag === "@ignore"
-                                ) ||
-                                child.signatures?.every((signature) =>
-                                    signature.comment?.blockTags?.some(
-                                        (tag) =>
-                                            tag.tag === "@deprecated" ||
-                                            tag.tag === "@internal" ||
-                                            tag.tag === "@ignore"
-                                    )
-                                )
-                            ) {
-                                return [];
-                            }
-
-                            return (
-                                `## \`${renderChildName(
-                                    child
-                                )}\`\n\n<sup>(${group.title
-                                    .toLowerCase()
-                                    .replace("bles", "ble")
-                                    .replace("ces", "ce")
-                                    .replace(/es$/, "")
-                                    .replace(
-                                        "ns",
-                                        "n"
-                                    )} in \`${packageName}\`)</sup>\n\n` +
-                                renderChildType(child) +
-                                (child.kind === ReflectionKind.Class ||
-                                child.kind === ReflectionKind.Interface ||
-                                child.kind === ReflectionKind.Namespace
-                                    ? renderSummary(child.comment) +
-                                      renderExamples(child.comment) +
-                                      (child.categories || child.groups)
-                                          ?.map((category) =>
-                                              renderChildCategory(child, category)
-                                          )
-                                          .join("<br/>\n\n")
-                                    : child.kind === ReflectionKind.Function
-                                    ? renderSummary(
-                                          child.signatures?.[0].comment
-                                      ) +
-                                      renderParamComments(
-                                          child.signatures?.[0].parameters || []
-                                      ) +
-                                      renderExamples(
-                                          child.signatures?.[0].comment
-                                      ) +
-                                      "\n\n"
-                                    : "TODO: doc generator not implemented yet " +
-                                      child.kind)
-                            );
-                        })
-                        .join("\n\n----\n\n");
-                })
-                .join("\n\n----\n\n")
-        );
-
-        function renderSummary(comment?: JSONOutput.Comment): string {
-            if (comment) {
-                return (
-                    comment.summary
-                        .map((token) =>
-                            token.kind === "text" || token.kind === "code"
-                                ? token.text
-                                : ""
-                        )
-                        .join("") +
-                    "\n\n" +
-                    "\n\n"
-                );
-            } else {
-                return "TODO: document\n\n";
-            }
-        }
-
-        function renderExamples(comment?: JSONOutput.Comment): string {
-            return (comment?.blockTags || [])
-                .map((blockTag) =>
-                    blockTag.tag === "@example"
-                        ? "##### Example:\n\n" +
-                          blockTag.content
-                              .map((token) =>
-                                  token.kind === "text" || token.kind === "code"
-                                      ? token.text
-                                      : ""
-                              )
-                              .join("") +
-                          "\n\n"
-                        : ""
-                )
-                .join("");
-        }
-
-        function renderParamComments(params: JSONOutput.ParameterReflection[]) {
-            const paramDocs = params.flatMap((param) => {
-                if (param.type?.type === "reflection") {
-                    return param.type.declaration.children?.flatMap((child) => {
-                        if (
-                            child.name === "children" &&
-                            child.type?.type === "reference" &&
-                            child.type?.name === "ReactNode"
-                        ) {
-                            return [];
-                        }
-                        return (
-                            `| \`${param.name}.${child.name}${
-                                child.flags.isOptional || child.defaultValue
-                                    ? "?"
-                                    : ""
-                            }\` | ` +
-                            (child.comment
-                                ? child.comment.summary
-                                      .map((token) =>
-                                          token.kind === "text" ||
-                                          token.kind === "code"
-                                              ? token.text
-                                              : ""
-                                      )
-                                      .join("")
-                                : "TODO: document") +
-                            " |"
-                        );
-                    });
-                } else {
-                    const comment = param.comment;
-                    return [
-                        `| \`${param.name}${
-                            param.flags.isOptional || param.defaultValue
-                                ? "?"
-                                : ""
-                        }\` | ` +
-                            (comment
-                                ? comment.summary
-                                      .map((token) =>
-                                          token.kind === "text" ||
-                                          token.kind === "code"
-                                              ? token.text
-                                              : ""
-                                      )
-                                      .join("")
-                                : "TODO: document ") +
-                            " |",
-                    ];
-                }
-            });
-
-            if (paramDocs.length) {
-                return `### Parameters:\n\n| name | description |\n| ----: | ---- |\n${paramDocs.join(
-                    "\n"
-                )}\n\n`;
-            }
-        }
-
-        function renderChildName(child: JSONOutput.DeclarationReflection) {
-            if (child.signatures) {
-                if (
-                    child.signatures[0].type?.type === "reference" &&
-                    child.signatures[0].type.qualifiedName ===
-                        "React.JSX.Element"
-                ) {
-                    return `<${child.name}/>`;
-                } else {
-                    return (
-                        child.name +
-                        `(${(child.signatures[0].parameters || [])
-                            .map(renderParamSimple)
-                            .join(", ")})`
-                    );
-                }
-            } else {
-                return child.name;
-            }
-        }
-
-        function renderChildType(
-            child: JSONOutput.DeclarationReflection
-        ): string {
-            const isClass = child.kind === ReflectionKind.Class;
-            const isTypeAlias = child.kind === ReflectionKind.TypeAlias;
-            const isInterface = child.kind === ReflectionKind.Interface;
-            const isNamespace = child.kind === ReflectionKind.Namespace;
-            const isFunction = !!child.signatures;
-
-            const kind = isClass
-                ? "class"
-                : isTypeAlias
-                ? "type"
-                : isFunction
-                ? "function"
-                : isInterface
-                ? "interface"
-                : isNamespace
-                ? "namespace"
-                : "";
-
-            return (
-                "```typescript\n" +
-                `export ${kind} ${child.name}` +
-                ((child.typeParameters || child.signatures?.[0].typeParameter)
-                    ? "<" +
-                      (child.typeParameters || child.signatures?.[0].typeParameter || []).map(renderTypeParam).join(", ") +
-                      ">"
-                    : "") +
-                (child.extendedTypes
-                    ? " extends " +
-                      child.extendedTypes.map(renderType).join(", ")
-                    : "") +
-                (child.implementedTypes
-                    ? " implements " +
-                      child.implementedTypes.map(renderType).join(", ")
-                    : "") +
-                (isClass || isInterface || isNamespace
-                    ? " {...}"
-                    : isTypeAlias
-                    ? ` = ${renderType(child.type)}`
-                    : child.signatures
-                    ? `(${(child.signatures[0].parameters || [])
-                          .map(renderParam)
-                          .join(", ")}): ${renderType(
-                          child.signatures[0].type
-                      )}`
-                    : "") +
-                "\n```\n"
-            );
-        }
-
-        function renderChildCategory(
-            child: JSONOutput.DeclarationReflection,
-            category: JSONOutput.ReflectionGroup
-        ): string {
-            return (
-                `### \`${child.name}\`: ${category.title.replace(/[^d]+\./, "")}\n\n` +
-                category.children
-                    ?.map((memberId) => {
-                        const member = child.children!.find(
-                            (member) => member.id === memberId
-                        )!;
-
-                        if (member.kind === 2048 || member.kind === 512) {
-                            if (
-                                member.signatures?.every(
-                                    (sig) =>
-                                        sig.comment?.modifierTags?.includes(
-                                            "@internal"
-                                        ) ||
-                                        sig.comment?.modifierTags?.includes(
-                                            "@deprecated"
-                                        )
-                                )
-                            ) {
-                                return "";
-                            } else {
-                                return documentConstructorOrMethod(
-                                    member,
-                                    child
-                                );
-                            }
-                        } else if (
-                            member.kind === 1024 ||
-                            member.kind === 262144
-                        ) {
-                            if (
-                                member.comment?.modifierTags?.includes(
-                                    "@internal"
-                                ) ||
-                                member.comment?.modifierTags?.includes(
-                                    "@deprecated"
-                                )
-                            ) {
-                                return "";
-                            } else {
-                                return documentProperty(member, child);
-                            }
-                        } else if (member.kind === 2097152) {
-                            if (
-                                member.comment?.modifierTags?.includes(
-                                    "@internal"
-                                ) ||
-                                member.comment?.modifierTags?.includes(
-                                    "@deprecated"
-                                )
-                            ) {
-                                return "";
-                            } else {
-                                return documentProperty(
-                                    { ...member, flags: { isStatic: true } },
-                                    child
-                                );
-                            }
-                        } else {
-                            return "Unknown member kind " + member.kind;
-                        }
-                    })
-                    .join("\n\n")
-            );
-        }
-
-        function renderType(t?: JSONOutput.SomeType): string {
-            if (!t) return "";
-            if (t.type === "reference") {
-                return (
-                    t.name +
-                    (t.typeArguments
-                        ? "<" + t.typeArguments.map(renderType).join(", ") + ">"
-                        : "")
-                );
-            } else if (t.type === "intrinsic") {
-                return t.name;
-            } else if (t.type === "literal") {
-                return JSON.stringify(t.value);
-            } else if (t.type === "union") {
-                const seen = new Set<string>();
-                return t.types
-                    .flatMap((t) => {
-                        const rendered =
-                            t.type === "intersection" || t.type === "union"
-                                ? `(${renderType(t)})`
-                                : renderType(t);
-
-                        if (seen.has(rendered)) {
-                            return [];
-                        } else {
-                            seen.add(rendered);
-                            return [rendered];
-                        }
-                    })
-                    .join(" | ");
-            } else if (t.type === "intersection") {
-                const seen = new Set<string>();
-                return t.types
-                    .flatMap((t) => {
-                        const rendered =
-                            t.type === "intersection" || t.type === "union"
-                                ? `(${renderType(t)})`
-                                : renderType(t);
-
-                        if (seen.has(rendered)) {
-                            return [];
-                        } else {
-                            seen.add(rendered);
-                            return [rendered];
-                        }
-                    })
-                    .join(" & ");
-            } else if (t.type === "indexedAccess") {
-                return (
-                    renderType(t.objectType) +
-                    "[" +
-                    renderType(t.indexType) +
-                    "]"
-                );
-            } else if (t.type === "reflection") {
-                if (t.declaration.indexSignature) {
-                    return (
-                        `{${
-                            t.declaration.children
-                                ? t.declaration.children
-                                      .map(
-                                          (child) =>
-                                              `  ${child.name}${
-                                                  child.flags.isOptional
-                                                      ? "?"
-                                                      : ""
-                                              }: ${indentEnd(
-                                                  renderType(child.type)
-                                              )},`
-                                      )
-                                      .join("\n")
-                                : ""
-                        }\n  [` +
-                        t.declaration.indexSignature?.parameters?.[0].name +
-                        ": " +
-                        renderType(
-                            t.declaration.indexSignature?.parameters?.[0].type
-                        ) +
-                        "]: " +
-                        indentEnd(
-                            renderType(t.declaration.indexSignature?.type)
-                        ) +
-                        " }"
-                    );
-                } else if (t.declaration.children) {
-                    return `{\n${t.declaration.children
-                        .map((child) =>
-                            child.signatures
-                                ? child.signatures
-                                      .map(
-                                          (signature) =>
-                                              `  ${child.name}(${
-                                                  signature.parameters
-                                                      ? "\n  " +
-                                                        indent(
-                                                            signature.parameters
-                                                                .map((p) =>
-                                                                    indentEnd(
-                                                                        renderParam(
-                                                                            p
-                                                                        )
-                                                                    )
-                                                                )
-                                                                .join(",\n  ")
-                                                        ) +
-                                                        "\n  )"
-                                                      : "()"
-                                              }: ${indentEnd(
-                                                  renderType(signature.type)
-                                              )}`
-                                      )
-                                      .join("\n") + ",\n"
-                                : `  ${child.name}${
-                                      child.flags.isOptional ? "?" : ""
-                                  }: ${indentEnd(renderType(child.type))},\n`
-                        )
-                        .join("")}}`;
-                } else if (t.declaration.signatures) {
-                    return t.declaration.signatures
-                        .map(
-                            (signature) =>
-                                `(${(signature.parameters || [])
-                                    .map(renderParam)
-                                    .join(", ")}) => ${renderType(
-                                    signature.type
-                                )}`
-                        )
-                        .join("\n");
-                } else {
-                    return "COMPLEX_TYPE_REFLECTION";
-                }
-            } else if (t.type === "array") {
-                return renderType(t.elementType) + "[]";
-            } else if (t.type === "tuple") {
-                return `[${t.elements?.map(renderType).join(", ")}]`;
-            } else if (t.type === "templateLiteral") {
-                const matchingNamedType = docs.children?.find(
-                    (child) =>
-                        child.variant === "declaration" &&
-                        child.type?.type === "templateLiteral" &&
-                        child.type.head === t.head &&
-                        child.type.tail.every(
-                            (piece, i) => piece[1] === t.tail[i][1]
-                        )
-                );
-
-                if (matchingNamedType) {
-                    return matchingNamedType.name;
-                } else {
-                    if (
-                        t.head === "sealerSecret_z" &&
-                        t.tail[0][1] === "/signerSecret_z"
-                    ) {
-                        return "AgentSecret";
-                    } else if (
-                        t.head === "sealer_z" &&
-                        t.tail[0][1] === "/signer_z"
-                    ) {
-                        if (t.tail[1] && t.tail[1][1] === "_session_z") {
-                            return "SessionID";
-                        } else {
-                            return "AgentID";
-                        }
-                    } else {
-                        return (
-                            "`" +
-                            t.head +
-                            t.tail
-                                .map(
-                                    (bit) =>
-                                        "${" + renderType(bit[0]) + "}" + bit[1]
-                                )
-                                .join("") +
-                            "`"
-                        );
-                    }
-                }
-            } else if (t.type === "conditional") {
-                const trueRendered = renderType(t.trueType);
-                const falseRendered = renderType(t.falseType);
-
-                if (
-                    trueRendered.includes("\n") ||
-                    falseRendered.includes("\n")
-                ) {
-                    return (
-                        renderType(t.checkType) +
-                        " extends " +
-                        renderType(t.extendsType) +
-                        "\n  ? " +
-                        indentEnd(renderType(t.trueType)) +
-                        "\n  : " +
-                        indentEnd(renderType(t.falseType))
-                    );
-                } else {
-                    return (
-                        renderType(t.checkType) +
-                        " extends " +
-                        renderType(t.extendsType) +
-                        " ? " +
-                        renderType(t.trueType) +
-                        " : " +
-                        renderType(t.falseType)
-                    );
-                }
-            } else if (t.type === "inferred") {
-                return "infer " + t.name;
-            } else if (t.type === "typeOperator") {
-                return t.operator + " " + renderType(t.target);
-            } else if (t.type === "mapped") {
-                return `{\n  [${t.parameter} in ${renderType(
-                    t.parameterType
-                )}]: ${indentEnd(renderType(t.templateType))}\n}`;
-            } else {
-                return "COMPLEX_TYPE_" + t.type;
-            }
-        }
-
-        // function renderTemplateLiteral(tempLit: JSONOutput.TemplateLiteralType) {
-        //     return tempLit.head + tempLit.tail.map((piece) => piece[0] + piece[1]).join("");
-        // }
-
-        // function resolveTemplateLiteralPieceType(t: SomeType): string {
-        //     if (t.type === "string") {
-        //         return "${string}"
-        //     }
-        //     if (t.type === "reference") {
-        //         const referencedType = docs.children?.find(
-        //             (child) => child.name === t.name
-        //         );
-
-        //     }
-        // }
-
-        function renderTypeParam(
-            t?: JSONOutput.TypeParameterReflection
-        ): string {
-            if (!t) return "";
-            return t.name + (t.type ? " extends " + renderType(t.type) : "");
-        }
-
-        function renderParam(param: JSONOutput.ParameterReflection) {
-            return param.name === "__namedParameters"
-                ? renderType(param.type)
-                : `${param.name}: ${renderType(param.type)}`;
-        }
-
-        function renderParamSimple(param: JSONOutput.ParameterReflection) {
-            return param.name === "__namedParameters" &&
-                param.type?.type === "reflection"
-                ? `{${param.type?.declaration.children
-                      ?.map(
-                          (child) =>
-                              child.name + (child.flags.isOptional ? "?" : "")
-                      )
-                      .join(", ")}}${
-                      param.flags.isOptional || param.defaultValue ? "?" : ""
-                  }`
-                : param.name +
-                      (param.flags.isOptional || param.defaultValue ? "?" : "");
-        }
-
-        function documentConstructorOrMethod(
-            member: JSONOutput.DeclarationReflection,
-            child: JSONOutput.DeclarationReflection
-        ) {
-            const isInClass = child.kind === 128;
-            const isInTypeDef = child.kind === 2097152;
-            const isInInterface = child.kind === 256;
-            const isInNamespace = child.kind === 4;
-            const isInFunction = !!child.signatures;
-
-            const inKind = isInClass
-                ? "class"
-                : isInTypeDef
-                ? "type"
-                : isInFunction
-                ? "function"
-                : isInInterface
-                ? "interface"
-                : isInNamespace
-                ? "namespace"
-                : "";
-
-            const stem =
-                member.name === "constructor"
-                    ? "new " + child.name + "</code></b>"
-                    : (member.flags.isStatic ? child.name : "") +
-                      "." +
-                      member.name +
-                      "";
-
-            return member.signatures
-                ?.map((signature) => {
-                    return (
-                        `<details>\n<summary><b><code>${stem}(${(
-                            signature?.parameters?.map(renderParamSimple) || []
-                        ).join(", ")})</code></b> ${
-                            member.inheritedFrom
-                                ? "<sub><sup>from <code>" +
-                                  member.inheritedFrom.name.split(".")[0] +
-                                  "</code></sup></sub> "
-                                : ""
-                        } ${
-                            signature?.comment
-                                ? ""
-                                : "<sub><sup>(undocumented)</sup></sub>"
-                        }</summary>\n\n` +
-                        ("```typescript\n" +
-                            `${inKind} ${child.name}${
-                                child.typeParameters
-                                    ? `<${child.typeParameters
-                                          .map((t) => t.name)
-                                          .join(", ")}>`
-                                    : ""
-                            } {\n\n${indent(
-                                `${member.name}${
-                                    signature.typeParameter
-                                        ? `<${signature.typeParameter
-                                              .map(renderTypeParam)
-                                              .join(", ")}>`
-                                        : ""
-                                }(${
-                                    (
-                                        signature.parameters?.map(
-                                            (param) =>
-                                                `\n  ${param.name}${
-                                                    param.flags.isOptional ||
-                                                    param.defaultValue
-                                                        ? "?"
-                                                        : ""
-                                                }: ${indentEnd(
-                                                    renderType(param.type)
-                                                )}${
-                                                    param.defaultValue
-                                                        ? ` = ${param.defaultValue}`
-                                                        : ""
-                                                }`
-                                        ) || []
-                                    ).join(",") +
-                                    (signature.parameters?.length ? "\n" : "")
-                                }): ${renderType(signature.type)} {...}`
-                            )}\n\n}\n` +
-                            "```\n" +
-                            renderSummary(signature.comment)) +
-                        renderParamComments(signature.parameters || []) +
-                        renderExamples(signature.comment) +
-                        "</details>\n\n"
-                    );
-                })
-                .join("\n\n");
-        }
-
-        function documentProperty(
-            member: JSONOutput.DeclarationReflection,
-            child: JSONOutput.DeclarationReflection
-        ) {
-            const isInClass = child.kind === 128;
-            const isInTypeDef = child.kind === 2097152;
-            const isInInterface = child.kind === 256;
-            const isInNamespace = child.kind === 4;
-            const isInFunction = !!child.signatures;
-
-            const inKind = isInClass
-                ? "class"
-                : isInTypeDef
-                ? "type"
-                : isInFunction
-                ? "function"
-                : isInInterface
-                ? "interface"
-                : isInNamespace
-                ? "namespace"
-                : "";
-
-            const stem = member.flags.isStatic ? child.name : "";
-            return (
-                `<details>\n<summary><b><code>${stem}.${
-                    member.name
-                }</code></b> ${
-                    member.inheritedFrom
-                        ? "<sub><sup>from <code>" +
-                          member.inheritedFrom.name.split(".")[0] +
-                          "</code></sup></sub> "
-                        : ""
-                } ${
-                    member.comment ? "" : "<sub><sup>(undocumented)</sup></sub>"
-                }</summary>\n\n` +
-                "```typescript\n" +
-                `${inKind} ${child.name}${
-                    child.typeParameters
-                        ? `<${child.typeParameters
-                              .map((t) => t.name)
-                              .join(", ")}>`
-                        : ""
-                } {\n\n${indent(
-                    `${member.getSignature ? "get " : ""}${member.name}${
-                        member.getSignature ? "()" : ""
-                    }: ${renderType(member.type || member.getSignature?.type)}${
-                        member.getSignature ? " {...}" : ""
-                    }`
-                )}` +
-                "\n\n}\n```\n" +
-                renderSummary(member.comment) +
-                renderExamples(member.comment) +
-                "</details>\n\n"
-            );
-        }
-    });
-
-    const docsContent = await readFile("./DOCS.md", "utf8");
-
-    await writeFile(
-        "./DOCS.md",
-        docsContent.slice(
-            0,
-            docsContent.indexOf("<!-- AUTOGENERATED DOCS AFTER THIS POINT -->")
-        ) +
-            "<!-- AUTOGENERATED DOCS AFTER THIS POINT -->\n" +
-            (await Promise.all(packageDocs)).join("\n\n\n")
-    );
+    await genDocsMd();
 }
 
-function indent(text: string): string {
+export function indent(text: string): string {
     return text
         .split("\n")
         .map((line) => "  " + line)
         .join("\n");
 }
 
-function indentEnd(text: string): string {
+export function indentEnd(text: string): string {
     return text
         .split("\n")
         .map((line, i) => (i === 0 ? line : "  " + line))

homepage/homepage-jazz/.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

homepage/homepage-jazz/Dockerfile

@@ -0,0 +1,65 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

homepage/homepage-jazz/app/globals.css

@@ -2,26 +2,407 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+@layer base, shiki;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 20 14.3% 4.1%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 20 14.3% 4.1%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 20 14.3% 4.1%;
+
+        --primary: 24 9.8% 10%;
+        --primary-foreground: 60 9.1% 97.8%;
+
+        --secondary: 60 4.8% 95.9%;
+        --secondary-foreground: 24 9.8% 10%;
+
+        --muted: 60 4.8% 95.9%;
+        --muted-foreground: 25 5.3% 44.7%;
+
+        --accent: 60 4.8% 95.9%;
+        --accent-foreground: 24 9.8% 10%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 60 9.1% 97.8%;
+
+        --border: 20 5.9% 90%;
+        --input: 20 5.9% 90%;
+        --ring: 20 14.3% 4.1%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 20 14.3% 4.1%;
+        --foreground: 60 9.1% 97.8%;
+
+        --card: 20 14.3% 4.1%;
+        --card-foreground: 60 9.1% 97.8%;
+
+        --popover: 20 14.3% 4.1%;
+        --popover-foreground: 60 9.1% 97.8%;
+
+        --primary: 60 9.1% 97.8%;
+        --primary-foreground: 24 9.8% 10%;
+
+        --secondary: 12 6.5% 15.1%;
+        --secondary-foreground: 60 9.1% 97.8%;
+
+        --muted: 12 6.5% 15.1%;
+        --muted-foreground: 24 5.4% 63.9%;
+
+        --accent: 12 6.5% 15.1%;
+        --accent-foreground: 60 9.1% 97.8%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 60 9.1% 97.8%;
+
+        --border: 12 6.5% 15.1%;
+        --input: 12 6.5% 15.1%;
+        --ring: 24 5.7% 82.9%;
+    }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+    .overlay-close {
+        background-color: "black";
+    }
+}
+
+pre.shiki {
+    overflow: hidden;
+}
+pre.shiki:hover .dim {
+    opacity: 1;
+}
+pre.shiki div.dim {
+    opacity: 0.5;
+}
+pre.shiki div.dim,
+pre.shiki div.highlight {
+    margin: 0;
+    padding: 0;
+}
+pre.shiki div.highlight {
+    opacity: 1;
+    background-color: #f1f8ff;
+}
+pre.shiki div.line {
+    min-height: 1rem;
+    counter-increment: lineNumber 1;
+}
+
+pre.shiki div.line::before {
+    content: counter(lineNumber);
+    display: inline-block;
+    vertical-align: middle;
+    width: 1.3rem;
+    padding-right: 0.3rem;
+    text-align: right;
+    @apply text-stone-200 dark:text-stone-800 text-[0.65rem];
+}
+
+/** Don't show the language identifiers */
+pre.shiki .language-id {
+    display: none;
+}
+
+/** When you mouse over the pre, show the underlines */
+pre.twoslash:hover data-lsp {
+    @apply border-dotted border-b border-stone-300 dark:border-stone-700;
+}
+
+/** The tooltip-like which provides the LSP response */
+pre.twoslash data-lsp::before {
+    content: attr(lsp);
+    position: absolute;
+    transform: translate(0, 1.2rem);
+    max-width: 30rem;
+    @apply text-xs px-1.5 py-1 rounded border border-stone-200 dark:border-stone-800 shadow-lg overflow-hidden whitespace-pre-wrap text-stone-700 bg-stone-50 dark:text-stone-200 dark:bg-stone-950;
+    text-align: left;
+    z-index: 100;
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+    display: none;
+}
+
+pre.twoslash data-lsp:hover::before {
+    display: block;
+    opacity: 1;
+    pointer-events: visible;
+    width: auto;
+    height: auto;
+}
+
+.shiki-outer {
+    @apply shadow-sm rounded-xl border border-stone-200 dark:border-stone-800;
+}
+
+.shiki-filename {
+    @apply px-3 py-2 bg-stone-100 text-stone-700 dark:bg-stone-900 dark:text-stone-300 rounded-t-xl text-xs;
+}
+
+pre .code-container {
+    overflow: scroll;
+    @apply p-2 pl-0 bg-stone-50 dark:bg-stone-950 rounded-b-xl text-[0.8rem] leading-4;
+}
+/* The try button */
+pre .code-container > a {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    border-radius: 4px;
+    border: 1px solid #719af4;
+    padding: 0 8px;
+    color: #719af4;
+    text-decoration: none;
+    opacity: 0;
+    transition-timing-function: ease;
+    transition: opacity 0.3s;
+}
+/* Respect no animations */
+@media (prefers-reduced-motion: reduce) {
+    pre .code-container > a {
+        transition: none;
+    }
+}
+pre .code-container > a:hover {
+    color: white;
+    background-color: #719af4;
+}
+pre .code-container:hover a {
+    opacity: 1;
+}
+
+pre code {
+    white-space: pre;
+}
+pre code a {
+    text-decoration: none;
+}
+pre data-err {
+    /* Extracted from VS Code */
+    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+        repeat-x bottom left;
+    padding-bottom: 3px;
+}
+pre .query {
+    margin-bottom: 10px;
+    color: #137998;
+    display: inline-block;
+}
+
+/* In order to have the 'popped out' style design and to not break the layout
+/* we need to place a fake and un-selectable copy of the error which _isn't_ broken out
+/* behind the actual error message.
+
+/* This sections keeps both of those two in in sync  */
+
+pre .error,
+pre .error-behind {
+    margin-left: -14px;
+    margin-top: 8px;
+    margin-bottom: 4px;
+    padding: 6px;
+    padding-left: 14px;
+    width: calc(100% - 20px);
+    white-space: pre-wrap;
+    display: block;
+}
+pre .error {
+    position: absolute;
+    background-color: #fee;
+    border-left: 2px solid #bf1818;
+    /* Give the space to the error code */
+    display: flex;
+    align-items: center;
+    color: black;
+}
+pre .error .code {
+    display: none;
+}
+pre .error-behind {
+    user-select: none;
+    visibility: transparent;
+    color: #fee;
+}
+/* Queries */
+pre .arrow {
+    /* Transparent background */
+    background-color: #eee;
+    position: relative;
+    top: -7px;
+    margin-left: 0.1rem;
+    /* Edges */
+    border-left: 1px solid #eee;
+    border-top: 1px solid #eee;
+    transform: translateY(25%) rotate(45deg);
+    /* Size */
+    height: 8px;
+    width: 8px;
+}
+pre .popover {
+    margin-bottom: 10px;
+    background-color: #eee;
+    display: inline-block;
+    padding: 0 0.5rem 0.3rem;
+    margin-top: 10px;
+    border-radius: 3px;
+}
+/* Completion */
+pre .inline-completions ul.dropdown {
+    display: inline-block;
+    position: absolute;
+    width: 240px;
+    background-color: gainsboro;
+    color: grey;
+    padding-top: 4px;
+    font-family: var(--code-font);
+    font-size: 0.8rem;
+    margin: 0;
+    padding: 0;
+    border-left: 4px solid #4b9edd;
+}
+pre .inline-completions ul.dropdown::before {
+    background-color: #4b9edd;
+    width: 2px;
+    position: absolute;
+    top: -1.2rem;
+    left: -3px;
+    content: " ";
+}
+pre .inline-completions ul.dropdown li {
+    overflow-x: hidden;
+    padding-left: 4px;
+    margin-bottom: 4px;
+}
+pre .inline-completions ul.dropdown li.deprecated {
+    text-decoration: line-through;
+}
+pre .inline-completions ul.dropdown li span.result-found {
+    color: #4b9edd;
+}
+pre .inline-completions ul.dropdown li span.result {
+    width: 100px;
+    color: black;
+    display: inline-block;
+}
+.dark-theme .markdown pre {
+    background-color: #d8d8d8;
+    border-color: #ddd;
+    filter: invert(98%) hue-rotate(180deg);
+}
+data-lsp {
+    /* Ensures there's no 1px jump when the hover happens */
+    border-bottom: 1px dotted transparent;
+    /* Fades in unobtrusively */
+    transition-timing-function: ease;
+    transition: border-color 0.3s;
+}
+/* Respect people's wishes to not have animations */
+@media (prefers-reduced-motion: reduce) {
+    data-lsp {
+        transition: none;
+    }
+}
+
+/** Annotations support, providing a tool for meta commentary */
+.tag-container {
+    position: relative;
+}
+.tag-container .twoslash-annotation {
+    position: absolute;
+    font-family: "JetBrains Mono", Menlo, Monaco, Consolas, Courier New,
+        monospace;
+    right: -10px;
+    /** Default annotation text to 200px */
+    width: 200px;
+    color: #187abf;
+    background-color: #fcf3d9 bb;
+}
+.tag-container .twoslash-annotation p {
+    text-align: left;
+    font-size: 0.8rem;
+    line-height: 0.9rem;
+}
+.tag-container .twoslash-annotation svg {
+    float: left;
+    margin-left: -44px;
+}
+.tag-container .twoslash-annotation.left {
+    right: auto;
+    left: -200px;
+}
+.tag-container .twoslash-annotation.left svg {
+    float: right;
+    margin-right: -5px;
+}
+
+/** Support for showing console log/warn/errors inline */
+pre .logger {
+    display: flex;
+    align-items: center;
+    color: black;
+    padding: 6px;
+    padding-left: 8px;
+    width: calc(100% - 19px);
+    white-space: pre-wrap;
+}
+pre .logger svg {
+    margin-right: 9px;
+}
+pre .logger.error-log {
+    background-color: #fee;
+    border-left: 2px solid #bf1818;
+}
+pre .logger.warn-log {
+    background-color: #ffe;
+    border-left: 2px solid #eae662;
+}
+pre .logger.log-log {
+    background-color: #e9e9e9;
+    border-left: 2px solid #ababab;
+}
+pre .logger.log-log svg {
+    margin-left: 6px;
+    margin-right: 9px;
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+    --shiki-color-text: #606060;
+    --shiki-color-background: transparent;
+    --shiki-token-constant: #00a5a5;
+    --shiki-token-string: #1aa245;
+    --shiki-token-comment: #aaa;
+    --shiki-token-keyword: #7b8bff;
+    --shiki-token-parameter: #ff9800;
+    --shiki-token-function: #445dd7;
+    --shiki-token-string-expression: #1aa245;
+    --shiki-token-punctuation: #969696;
+    --shiki-token-link: #1aa245;
+}
+
+.dark body {
+    --shiki-color-text: #d1d1d1;
+    --shiki-token-constant: #2dc9c9;
+    --shiki-token-string: #ffab70;
+    --shiki-token-comment: #6b737c;
+    --shiki-token-keyword: #7b8bff;
+    --shiki-token-parameter: #ff9800;
+    --shiki-token-function: #9babff;
+    --shiki-token-string-expression: #42bb69;
+    --shiki-token-punctuation: #bbb;
+    --shiki-token-link: #ffab70;
 }

homepage/homepage-jazz/app/layout.tsx

@@ -1,22 +1,206 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import "./globals.css";
+import type { Metadata } from "next";
+import { ThemeProvider } from "@/components/themeProvider";
 
-const inter = Inter({ subsets: ['latin'] })
+import { Manrope } from "next/font/google";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+
+import { GcmpLogo, JazzLogo } from "@/components/logos";
+import { SiGithub, SiDiscord, SiTwitter } from "@icons-pack/react-simple-icons";
+import { Nav, NavLink, Newsletter, NewsletterButton } from "@/components/nav";
+import { MailIcon } from "lucide-react";
+
+// If loading a variable font, you don't need to specify the font weight
+const manrope = Manrope({ subsets: ["latin"], variable: "--font-manrope" });
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const pragmata = localFont({
+    src: "../fonts/ppr_0829.woff2",
+    variable: "--font-ppr",
+});
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+    title: "jazz - Instant sync",
+    description: "Go beyond request/response - ship modern apps with sync.",
+};
 
 export default function RootLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode
+    children: React.ReactNode;
 }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
+    return (
+        <html lang="en">
+            <body
+                className={[
+                    manrope.variable,
+                    pragmata.variable,
+                    inter.className,
+                    "flex flex-col items-center bg-stone-50 dark:bg-stone-950 overflow-x-hidden",
+                ].join(" ")}
+            >
+                <ThemeProvider
+                    attribute="class"
+                    defaultTheme="system"
+                    enableSystem
+                    disableTransitionOnChange
+                >
+                    <Nav
+                        mainLogo={<JazzLogo className="w-24" />}
+                        items={[
+                            { title: "Toolkit", href: "/" },
+                            { title: "Global Mesh", href: "/mesh" },
+                            {
+                                title: "Docs & Guides",
+                                href: "https://github.com/gardencmp/jazz/blob/main/DOCS.md",
+                                newTab: true,
+                            },
+                            {
+                                title: "Blog",
+                                href: "https://gcmp.io/news",
+                                firstOnRight: true,
+                                newTab: true,
+                            },
+                            {
+                                title: "Releases",
+                                href: "https://github.com/gardencmp/jazz/releases",
+                                newTab: true,
+                            },
+                            {
+                                title: "Roadmap",
+                                href: "https://github.com/orgs/gardencmp/projects/4/views/3",
+                                newTab: true,
+                            },
+                            {
+                                title: "GitHub",
+                                href: "https://github.com/gardencmp/jazz",
+                                newTab: true,
+                                icon: <SiGithub className="w-5" />,
+                            },
+                            {
+                                title: "Discord",
+                                href: "https://discord.gg/utDMjHYg42",
+                                newTab: true,
+                                icon: <SiDiscord className="w-5" />,
+                            },
+                            {
+                                title: "X",
+                                href: "https://x.com/jazz_tools",
+                                newTab: true,
+                                icon: <SiTwitter className="w-5" />,
+                            },
+                        ]}
+                    />
+                    <main className="flex min-h-screen flex-col p-8 max-w-[80rem] w-full">
+                        <article
+                            className={[
+                                "pt-20",
+                                "prose lg:prose-lg max-w-none prose-stone dark:prose-invert",
+                                "prose-headings:font-display",
+                                "prose-h1:text-5xl lg:prose-h1:text-6xl prose-h1:font-medium prose-h1:tracking-tighter",
+                                "prose-h2:text-2xl lg:prose-h2:text-3xl prose-h2:font-medium prose-h2:tracking-tight",
+                                "prose-p:max-w-3xl prose-p:leading-snug",
+                                "prose-strong:font-medium",
+                                "prose-code:font-normal prose-code:leading-tight prose-code:before:content-none prose-code:after:content-none prose-code:bg-stone-100 prose-code:dark:bg-stone-900 prose-code:p-1 prose-code:-my-1 prose-code:rounded",
+                            ].join(" ")}
+                        >
+                            {children}
+                        </article>
+                    </main>
+                    <footer className="flex mt-10 min-h-[15rem] -mb-20 bg-stone-100 dark:bg-stone-900 text-stone-600 dark:text-stone-400 w-full justify-center">
+                        <div className="p-8 max-w-[80rem] w-full grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-8 max-sm:mb-12">
+                            <div className="col-span-full md:col-span-1 sm:row-start-4 md:row-start-auto lg:col-span-2 md:row-span-2 md:flex-1 flex flex-row md:flex-col max-sm:mt-4 justify-between max-sm:items-start gap-2 text-sm min-w-[10rem]">
+                                <GcmpLogo monochrome className="w-32" />
+                                <p className="max-sm:text-right">
+                                    © 2023
+                                    <br />
+                                    Garden Computing, Inc.
+                                </p>
+                            </div>
+                            <div className="flex flex-col gap-2 text-sm">
+                                <h1 className="font-medium">Resources</h1>
+                                <NavLink
+                                    className="py-0.5 max-sm:px-0 md:px-0 lg:px-0"
+                                    href="/"
+                                >
+                                    Toolkit
+                                </NavLink>
+                                <NavLink
+                                    className="py-0.5 max-sm:px-0 md:px-0 lg:px-0"
+                                    href="/mesh"
+                                >
+                                    Global Mesh
+                                </NavLink>
+                                <NavLink
+                                    className="py-0.5 max-sm:px-0 md:px-0 lg:px-0"
+                                    href="https://github.com/gardencmp/jazz/blob/main/DOCS.md"
+                                    newTab
+                                >
+                                    Docs & Guides
+                                </NavLink>
+                            </div>
+                            {/* <div className="flex flex-col gap-2 text-sm">
+                                <h1 className="font-medium">Legal</h1>
+                            </div> */}
+                            <div className="flex flex-col gap-2 text-sm">
+                                <h1 className="font-medium">Community</h1>
+                                <NavLink
+                                    className="py-0.5 max-sm:px-0 md:px-0 lg:px-0"
+                                    href="https://github.com/gardencmp/jazz"
+                                    newTab
+                                >
+                                    GitHub
+                                </NavLink>
+                                <NavLink
+                                    className="py-0.5 max-sm:px-0 md:px-0 lg:px-0"
+                                    href="https://discord.gg/utDMjHYg42"
+                                    newTab
+                                >
+                                    Discord
+                                </NavLink>
+                                <NavLink
+                                    className="py-0.5 max-sm:px-0 md:px-0 lg:px-0"
+                                    href="https://x.com/jazz_tools"
+                                    newTab
+                                >
+                                    Twitter
+                                </NavLink>
+                            </div>
+                            <div className="flex flex-col gap-2 text-sm">
+                                <h1 className="font-medium">News</h1>
+                                <NavLink
+                                    className="py-0.5 max-sm:px-0 md:px-0 lg:px-0"
+                                    href="https://gcmp.io/news"
+                                    newTab
+                                >
+                                    Blog
+                                </NavLink>
+                                <NavLink
+                                    className="py-0.5 max-sm:px-0 md:px-0 lg:px-0"
+                                    href="https://github.com/gardencmp/jazz/releases"
+                                    newTab
+                                >
+                                    Releases
+                                </NavLink>
+                                <NavLink
+                                    className="py-0.5 max-sm:px-0 md:px-0 lg:px-0"
+                                    href="https://github.com/orgs/gardencmp/projects/4/views/3"
+                                    newTab
+                                >
+                                    Roadmap
+                                </NavLink>
+                            </div>
+                            <div className="col-span-3 md:col-start-2 lg:col-start-auto flex flex-col gap-2 text-sm">
+                                Sign up for updates:
+
+
+                                <Newsletter/>
+                            </div>
+                        </div>
+                    </footer>
+                </ThemeProvider>
+                <script defer data-api="/api/event" data-domain="jazz.tools" src="/js/script.js"></script>
+            </body>
+        </html>
+    );
 }

homepage/homepage-jazz/app/mesh/page.mdx

@@ -0,0 +1,202 @@
+import { Slogan, Grid, GridCard, GridItem, ComingSoonBadge } from '@/components/forMdx';
+import { pricePer1MtxSyncedOut, pricePerTxSyncedOut, pricePer1MtxStored, pricePerTxStored } from '@/components/pricing';
+
+export const metadata = {
+    title: "jazz - Global Mesh",
+    description: "Serverless sync & storage for Jazz apps.",
+};
+
+# Jazz Global Mesh
+
+<Slogan>Serverless sync & storage for Jazz apps.</Slogan>
+
+Real-time sync and storage infrastructure that scales up to millions of users.<br/>
+Pricing that scales down to zero.
+
+## The first Collaboration Delivery Network
+
+<Slogan small>Build demanding apps with distributed state, backed by a new kind of cloud.</Slogan>
+
+<Grid>
+<GridCard>
+#### Optimal mesh routing.
+
+Get ultra-low latency between any group of users with our decentralized mesh interconnect.
+</GridCard>
+<GridCard>
+#### Smart caching.
+
+Give users instant load times, with their latest data state always cached close to them.
+</GridCard>
+<GridCard>
+#### Blob storage & media streaming.
+
+Store files and media streams as idiomatic `CoValues` without S3.
+</GridCard>
+</Grid>
+
+## Pricing
+
+<Slogan small></Slogan>
+
+### Free Tier
+<span className="text-lg font-medium bg-emerald-200 dark:bg-emerald-800 px-2 py-1 rounded">Until we implement billing all usage of Global Mesh is free!</span>
+<p className="text-sm">Later, any usage under $1/mo will be free.</p>
+
+
+
+<Grid>
+<GridItem className="md:col-span-2">
+### Unlimited <ComingSoonBadge/>
+
+
+<div className="lg:text-2xl border rounded-lg px-1 py-3 text-center">${pricePer1MtxSyncedOut} <small>per 1M TXs synced out</small> + ${pricePer1MtxStored}<small>/mo per 1M TXs stored</small></div>
+
+<p><small>$6/mo minimum usage</small></p>
+
+A TX (transaction) represents an **individual user action**, or **up to 100KB of binary data**.
+</GridItem>
+
+<GridItem className="col-start-1">
+#### Transactions synced out:
+<div className="text-sm">
+- Transactions sent out from Global Mesh, each counted once for every device it is synced out to.
+- Depending on cache behavior each transaction should only be synced out once per connection, ideally once per device requesting it.
+</div>
+</GridItem>
+<GridItem>
+#### Transactions stored:
+<div className="text-sm">
+- Transactions that are continuously persisted.
+- Counted per second.
+- Includes backups, hot storage and edge caches.
+</div>
+</GridItem>
+</Grid>
+
+**Examples:**
+
+The number of transactions generated is highly app-specific and depends on user behaviour, but here are some examples:
+
+<div className="text-sm">
+- 4 users co-editing 10 pages of text, typing them out as individual character inserts:
+  - 3,000 inserts/page &times; 10 pages = 30,000 transactions
+  - 30,000 transactions stored = ${30000 * pricePerTxStored} / mo
+  - 3 &times; 30,000 transactions synced out = ${3 * 30000 * pricePerTxSyncedOut} one-time
+- 4 users collaborating on a canvas, moving shapes around at 10 FPS for 10s/min for 2h/day for a month
+    - 4 users &times; 10 FPS &times; 10s/min &times; 60min/h * 2h/day &times; 30days = 1.44M transactions
+    - 1.44M transactions stored = ${1440000 * pricePerTxStored} / mo = ${1440000 * pricePerTxStored / 4} / mo / user
+    - 3 &times; 1.44M transactions synced out =  ${(3 * 1440000 * pricePerTxSyncedOut).toLocaleString("en-US", { maximumSignificantDigits: 3, })} one-time = ${(3 * 1440000 * pricePerTxSyncedOut / 4).toLocaleString("en-US", { maximumSignificantDigits: 3, })} one-time / user
+- A livestreamer streaming video (1GB total) to 100 viewers (combined live & on-demand)
+  - 1GB = 10,000 transactions (100KB each)
+  - 10,000 transactions stored = ${10000 * pricePerTxStored} / mo (= ${10000 * 1000 * pricePerTxStored} per 1TB stored)
+  - 100 &times; 10,000 transaction synced out = ${100 * 10000 * pricePerTxSyncedOut} one-time (= ${10000 * 1000 * pricePerTxSyncedOut} per 1TB egress)
+</div>
+
+## Global Footprint
+
+We're rapidly expanding our network of sync & storage nodes. This is our current best-effort coverage:
+
+<Grid className="grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+<GridItem>
+<div className="text-sm">
+**Under 50ms RTT**
+- Frankfurt
+- New York
+- Newark
+- North California
+- North Virginia
+- San Francisco
+- Singapore
+- Toronto
+</div>
+</GridItem>
+<GridItem>
+<div className="text-sm">
+**Under 100ms RTT**
+- Amsterdam
+- Atlanta
+- London
+- Ohio
+- Paris
+</div>
+</GridItem>
+<GridItem>
+<div className="text-sm">
+**Under 200ms RTT**
+- Bangalore
+- Dallas
+- Mumbai
+- Oregon
+
+**Under 300ms RTT**
+- Seoul
+- Tokyo
+</div>
+</GridItem>
+<GridItem>
+<div className="text-sm">
+**Under 400ms RTT**
+- Sao Paulo
+- Sydney
+
+**Under 500ms RTT**
+- Cape Town
+</div>
+</GridItem>
+</Grid>
+
+### Enterprise
+
+Custom deployment in the cloud, your private cloud, on-premises or hybrids?
+
+SLAs and dedicated support? White-glove integration services?
+
+Let's talk: <a href="mailto:hello@gcmp.io">hello@gcmp.io</a>
+
+## Custom Deployment Scenarios
+
+<Slogan>You can rely on Global Mesh. But you don't have to.</Slogan>
+
+<p>Because Jazz is open-source, you can optionally run your own sync nodes &mdash; in a variety of setups.</p>
+
+<Grid>
+<GridCard>
+#### Global Mesh + Data Backup Node.
+
+<p className="no-prose text-base">Connect your users to Global Mesh for all its benefits, but also run and connect your own data backup node (just in case.)</p>
+
+<div className="text-sm">
+Extra costs:
+- Instance costs for the backup node.
+- Moderate self-hosted storage costs.
+- Every transaction is additionally synced to your backup node and counted as synced out.
+</div>
+</GridCard>
+<GridCard>
+#### Global Mesh + DIY Mesh.
+
+<p className="no-prose text-base">Connect your users to Global Mesh, or your own nodes as a lower-performance fallback. The two networks stay in constant sync.</p>
+
+<div className="text-sm">
+Extra costs:
+- N × instance cost for your sync nodes.
+- Typically moderate self-hosted egress costs.
+- High self-hosted storage costs.
+- Every transaction is additionally synced to your DIY mesh and counted as synced out.
+</div>
+</GridCard>
+<GridCard>
+#### Completely DIY Mesh.
+
+<p className="no-prose text-base">Build your own network of sync and storage nodes.
+Handle networking, security and backups yourself.</p>
+
+<div className="text-sm">
+Costs:
+- N × instance cost for your sync nodes.
+- Very high self-hosted egress costs.
+- High self-hosted storage costs.
+</div>
+</GridCard>
+</Grid>

homepage/homepage-jazz/app/page.mdx

@@ -0,0 +1,281 @@
+import {
+    Slogan,
+    Grid,
+    GridItem,
+    GridFeature,
+    GridCard,
+    MultiplayerIcon,
+    ResponsiveIframe,
+    ComingSoonBadge
+} from "@/components/forMdx";
+import {
+    JazzLogo
+} from "@/components/logos";
+import {
+    WorkflowIcon,
+    UploadCloudIcon,
+    PlaneIcon,
+    MonitorSmartphoneIcon,
+    GaugeIcon,
+} from "lucide-react";
+import {
+    DataModel_ts,
+    App_tsx,
+    ChatWindow_tsx,
+} from "@/codeSamples/examples/chat/src";
+import Link from "next/link";
+
+
+# Instant sync
+
+<Slogan>Go beyond request/response &mdash; ship modern apps with sync.</Slogan>
+
+Jazz is an open-source toolkit for building apps with **sync** & **secure collaborative data.**
+
+<h2 className="md:mt-24">Hard things are easy now</h2>
+
+Jazz replaces APIs, DBs and message queues with **a single new abstraction: CoJSON**.
+
+This means you get **built-in capabilities** that took best-in-class apps years to build:
+
+<Grid className="-mt-2 gap-[1px] border rounded-xl overflow-hidden border-stone-200 dark:border-stone-800 shadow-sm bg-stone-200 dark:bg-stone-800 [&>*]:rounded-none [&>*]:border-none [&>*]:bg-stone-50 [&>*]:dark:bg-stone-950">
+<GridFeature icon={<MonitorSmartphoneIcon />}>Cross-device sync</GridFeature>
+<GridFeature icon={<MultiplayerIcon/>}>Real-time multiplayer</GridFeature>
+<GridFeature icon={<WorkflowIcon />}>Automatic granular data‑fetching</GridFeature>
+<GridFeature icon={<UploadCloudIcon />}>Local & cloud persistence</GridFeature>
+<GridFeature icon={<PlaneIcon />}>Offline support & Quick reconnect</GridFeature>
+<GridFeature icon={<GaugeIcon />}>Instant UI updates & quick loads</GridFeature>
+</Grid>
+
+<div className="-mx-[calc(min(0,(100vw-95rem)/2))]">
+### First impressions
+<Slogan small>A chat app in 82 lines of code.</Slogan>
+
+<Grid className="mt-0">
+<GridItem>
+
+<DataModel_ts/>
+
+</GridItem>
+<GridItem className="md:col-start-1">
+
+<App_tsx/>
+
+</GridItem>
+<GridItem className="md:col-start-2 md:row-start-1 md:row-span-2">
+
+<ChatWindow_tsx/>
+
+</GridItem>
+<ResponsiveIframe src="https://chat.jazz.tools" className="lg:col-start-3 lg:row-start-1 lg:row-span-2 rounded-xl overflow-hidden min-h-[50vh]"/>
+</Grid>
+</div>
+
+## CoJSON
+<Slogan small>The collaborative core.</Slogan>
+
+Jazz is built around **CoJSON,** a new abstraction for **sync** & **secure collaborative data.** And while it does all the heavy lifting...
+
+- **multi-device co-editing**
+- **user identities & accounts**
+- **permissions** & **roles**
+- **sync** & **caching**
+- **persistence**
+
+...its API couldn't be simpler: CoJSON makes collaboration and secure access control feel like **inherent properties of your data**.
+
+### Collaborative Values
+
+<Slogan small>Your new building blocks.</Slogan>
+
+Collaborative Values (CoValues) **can be edited as if they were simple local data,** but they're **automatically encrypted, signed** and **synced** between participants.
+
+CoValues also **keep their full edit history,** including author metadata and potential editing conflicts. This makes it **super simple to build collaborative and social features.**
+
+<Grid className="lg:gap-y-8">
+
+<GridCard>
+### `CoMap`
+<div className="text-sm">
+- Collaborative key-value map
+- Possible values:
+    - Immutable JSON & IDs of other CoValues
+</div>
+</GridCard>
+<GridCard>
+### `CoList`
+<div className="text-sm">
+- Collaborative ordered list
+- Possible items:
+    - Immutable JSON & IDs of other CoValues
+</div>
+</GridCard>
+<GridItem className="col-span-full lg:col-span-1 mb-10 lg:ml-4 [&>p]:m-0 pt-4">
+The bread and butter of datastructures, with collaboration built-in. You can build whole apps with just these.
+</GridItem>
+
+<GridCard>
+### `CoString` <ComingSoonBadge/>
+<div className="text-sm">
+- Collaborative plain-text
+- Implemented as a CoList of unicode graphemes
+- Supports concurrent inserts and deletes well
+</div>
+</GridCard>
+<GridCard>
+### `CoText` <ComingSoonBadge/>
+<div className="text-sm">
+- Collaborative rich-text based on `CoString` and a `CoMap` of collaborative markup ranges
+    - Gracefully prevents most editing conflicts
+    - Rendered as markdown, HTML, JSX, etc.
+</div>
+</GridCard>
+
+<GridItem className="col-span-full lg:col-span-1 mb-10 lg:ml-4 [&>p]:m-0 pt-4">
+A shocking amount of UI is text editing. CoJSON offers correct, versatile primitives.
+</GridItem>
+<GridCard>
+
+### `CoStream`
+<div className="text-sm">
+- Collection of independent per-user items streams:
+    - Immutable JSON & IDs of other CoValues
+- Great for presence, reactions, polls, replies etc.
+</div>
+</GridCard>
+<GridCard>
+
+### `BinaryCoStream`
+<div className="text-sm">
+- A `CoStream` of binary data chunks
+- Use for files and media streams
+- Create, load, sync and store binary blobs or live-streams as just another kind of object
+</div>
+</GridCard>
+<GridItem className="col-span-full lg:col-span-1 mb-10 lg:ml-4 [&>p]:m-0 pt-4">
+Two extra tools that let you do everything you need in your app without having to integrate additional external services.
+</GridItem>
+</Grid>
+
+### Groups & Accounts
+
+<Slogan small>First-class user identities & secure permissions.</Slogan>
+
+<Grid>
+<GridCard>
+### `Group`
+<div className="text-sm">
+- A scope where specified accounts have roles (`reader`/`writer`/`admin`).
+- A `Group` owns `CoValues`, with access right determined by group roles.
+- Accounts can be added to groups directly or using shareable invite secrets.
+</div>
+</GridCard>
+<GridCard>
+### `Account`
+<div className="text-sm">
+- Represents a single user and their signing/encryption keys.
+- Has a private account root and a public profile
+    - Can contain arbitrary app-specific data
+</div>
+</GridCard>
+<GridItem className="col-span-full lg:col-span-1 mb-10 lg:ml-4 [&>p]:m-0 pt-4">
+A simple API to define access control from anywhere, verifiably enforced by encryption and signatures.
+</GridItem>
+</Grid>
+
+## The Jazz Toolkit
+
+<Slogan small>Idiomatic bindings for CoJSON, with batteries included.</Slogan>
+
+Supported environments:
+<div className="text-sm">
+- Browser (sync via WebSockets, IndexedDB persistence)
+    - React
+    - Vanilla JS / framework agnostic base
+- React Native <ComingSoonBadge/>
+- NodeJS (sync via WebSockets, SQLite persistence) <ComingSoonBadge/>
+- Swift, Kotlin, Rust <ComingSoonBadge when="later"/>
+</div>
+<Grid>
+
+<GridCard>
+### Auto-sub
+<Slogan small>Let your UI drive data-syncing.</Slogan>
+<div className="text-sm">
+- Load and auto-subscribe to deeply nested `CoValues` with a reactive hook (or callback).
+- Access properties & metadata as plain JSON.
+- Make granular changes with simple mutators.
+- No queries needed, everything loads on-demand: <br/>
+`profile?.tweets?.map(tweet => tweet?.text)`
+</div>
+</GridCard>
+
+<GridCard>
+### Cursors & carets
+<Slogan small>Ready-made spatial presence.</Slogan>
+<div className="text-sm">
+- 2D canvas cursors <ComingSoonBadge/>
+- Text carets <ComingSoonBadge/>
+- Element-based focus-presence <ComingSoonBadge/>
+- Scroll-based / out-of-bounds helpers <ComingSoonBadge/>
+</div>
+</GridCard>
+
+<GridCard>
+### Auth providers
+
+<Slogan small>Plug and play different kinds of auth.</Slogan>
+<div className="text-sm">
+- DemoAuth (for quick multi-user demos)
+- WebAuthN (TouchID/FaceID)
+- Auth0, Clerk & Okta <ComingSoonBadge/>
+- NextAuth <ComingSoonBadge/>
+</div>
+</GridCard>
+
+<GridCard>
+### Two-way sync to your DB
+<Slogan small>Add Jazz to an existing app.</Slogan>
+<div className="text-sm">
+- Prisma <ComingSoonBadge/>
+- Drizzle <ComingSoonBadge/>
+- PostgreSQL introspection <ComingSoonBadge/>
+</div>
+</GridCard>
+
+<GridCard>
+### File upload & download
+
+<Slogan small>Just use `<input type="file"/>`.</Slogan>
+<div className="text-sm">
+- Easily convert from and to Browser `Blob`s
+- Super simple progressive image loading
+</div>
+</GridCard>
+
+<GridCard>
+### Video presence & calls
+
+<Slogan small>Stream and record audio & video.</Slogan>
+<div className="text-sm">
+- Automatic WebRTC connections between `Group` members <ComingSoonBadge/>
+- Audio/video recording into `BinaryCoStreams` <ComingSoonBadge/>
+</div>
+</GridCard>
+</Grid>
+
+## Global Mesh
+
+<Slogan small>Serverless sync & storage for Jazz apps</Slogan>
+
+To give you sync & secure collaborative data instantly on a global scale, we're running Global Mesh. It works with any CoJSON-based app, requires no setup and has straightforward, scale-to-zero pricing.
+
+Global Mesh is currently free &mdash; and it's set up as the default sync & storage peer in Jazz, letting you start building multi-user apps with persistence right away, no backend needed.
+
+<Link href="/mesh" target="_blank">Learn more about Global Mesh</Link>
+
+## Get Started
+
+- See the <Link href="https://github.com/gardencmp/jazz#todo-list" target="_blank">Todo List Example Walkthrough</Link>
+- <Link href="https://github.com/gardencmp/jazz/blob/main/DOCS.md" target="_blank">Read the docs</Link>
+- <Link href="https://discord.gg/utDMjHYg42" target="_blank">Join our Discord</Link>

homepage/homepage-jazz/app/page.tsx

@@ -1,113 +0,0 @@
-import Image from 'next/image'
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}

homepage/homepage-jazz/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

homepage/homepage-jazz/components/ResponsiveIframe.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useLayoutEffect, useState, useRef, IframeHTMLAttributes } from "react";
+
+export function ResponsiveIframe(
+    props: IframeHTMLAttributes<HTMLIFrameElement>
+) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const [url, setUrl] = useState<string | undefined>(props.src);
+
+    useLayoutEffect(() => {
+        const listener = (e: MessageEvent) => {
+            console.log(e);
+            if (e.data.type === "navigate" && props.src?.startsWith(e.origin)) {
+                setUrl(e.data.url);
+            }
+        };
+        window.addEventListener("message", listener);
+        return () => {
+            window.removeEventListener("message", listener);
+        };
+    }, [props.src]);
+
+    useLayoutEffect(() => {
+        if (!containerRef.current) return;
+        const observer = new ResizeObserver(() => {
+            if (!containerRef.current) return;
+            setDimensions({
+                width: containerRef.current.offsetWidth,
+                height: containerRef.current.offsetHeight,
+            });
+        });
+        observer.observe(containerRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [containerRef]);
+
+    return (
+        <div
+            className={
+                "w-full h-full flex flex-col items-stretch border border-stone-200 dark:border-stone-800 " +
+                props.className
+            }
+        >
+            <div className="rounded-t-xl bg-stone-100 dark:bg-stone-900 py-1.5 px-10 flex">
+                <input
+                    className="text-xs px-1 py-0.5 bg-stone-100 dark:bg-stone-900 outline outline-1 outline-stone-200 dark:outline-stone-800 w-full rounded text-center"
+                    value={url?.replace("http://", "").replace("https://", "")}
+                    onClick={(e) => e.currentTarget.select()}
+                    onBlur={(e) => e.currentTarget.setSelectionRange(0, 0)}
+                    readOnly
+                />
+            </div>
+            <div className="flex-grow" ref={containerRef}>
+                <iframe
+                    {...props}
+                    className="dark:bg-black"
+                    {...dimensions}
+                    allowFullScreen
+                />
+            </div>
+        </div>
+    );
+}

homepage/homepage-jazz/components/forMdx.tsx

@@ -0,0 +1,108 @@
+export function Slogan(props: { children: ReactNode; small?: boolean }) {
+    return (
+        <div
+            className={[
+                "leading-snug mb-5 max-w-3xl text-stone-700 dark:text-stone-200",
+                props.small ? "text-lg lg:text-xl -mt-2" : "text-xl lg:text-2xl -mt-5",
+            ].join(" ")}
+        >
+            {props.children}
+        </div>
+    );
+}
+
+export function Grid({
+    className,
+    children,
+}: {
+    className?: string;
+    children: ReactNode;
+}) {
+    return (
+        <div
+            className={cn(
+                "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+                "mt-10 items-stretch",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+export function GridItem(props: { children: ReactNode; className?: string }) {
+    return <div className={props.className || ""}>{props.children}</div>;
+}
+
+export function GridFeature(props: {
+    icon: ReactNode;
+    children: ReactNode;
+    className?: string;
+}) {
+    return (
+        <div
+            className={[
+                "p-4 flex items-center gap-2",
+                "not-prose text-base",
+                "border border-stone-200 dark:border-stone-800 rounded-xl shadow-sm",
+                props.className || "",
+            ].join(" ")}
+        >
+            <div className="text-stone-500 mr-2">{props.icon}</div>
+            {props.children}
+        </div>
+    );
+}
+
+export function GridCard(props: { children: ReactNode; className?: string }) {
+    return (
+        <div
+            className={[
+                "p-4 [&>h4]:mt-0 [&>h3]:mt-0 [&>:last-child]:mb-0",
+                "border border-stone-200 dark:border-stone-800 rounded-xl  shadow-sm",
+                props.className,
+            ].join(" ")}
+        >
+            {props.children}
+        </div>
+    );
+}
+
+export function MultiplayerIcon() {
+    return (
+        <div className="w-8 h-8 -my-1 -mr-2 relative z-0">
+            <MousePointer2Icon
+                size="20"
+                absoluteStrokeWidth
+                strokeWidth={2}
+                className="absolute top-1 right-0"
+            />
+            <MousePointer2Icon
+                size="16"
+                absoluteStrokeWidth
+                strokeWidth={2}
+                className="absolute bottom-1 left-0 -scale-x-100"
+            />
+        </div>
+    );
+}
+
+export function ComingSoonBadge({when = "soon"}: {when?: string}) {
+    return (
+        <span className="bg-stone-100 dark:bg-stone-900 text-stone-500 dark:text-stone-400 border border-stone-300 dark:border-stone-700 text-[0.6rem] px-1 py-0.5 rounded-xl align-text-top">
+            Coming&nbsp;{when}
+        </span>
+    );
+}
+
+import { IframeHTMLAttributes, ReactNode } from "react";
+import { ResponsiveIframe as ResponsiveIframeClient } from "./ResponsiveIframe";
+import { HandIcon, MousePointer2Icon, TextCursorIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function ResponsiveIframe(
+    props: IframeHTMLAttributes<HTMLIFrameElement>
+) {
+    return <ResponsiveIframeClient {...props} />;
+}

homepage/homepage-jazz/components/nav.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { MailIcon, MenuIcon, SearchIcon, XIcon } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ReactNode, useLayoutEffect, useRef, useState } from "react";
+
+export function Nav({
+    mainLogo,
+    items,
+}: {
+    mainLogo: ReactNode;
+    items: {
+        href: string;
+        icon?: ReactNode;
+        title: string;
+        firstOnRight?: boolean;
+        newTab?: boolean;
+    }[];
+}) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [searchOpen, setSearchOpen] = useState(false);
+    const searchRef = useRef<HTMLInputElement>(null);
+
+    useLayoutEffect(() => {
+        searchOpen && searchRef.current?.focus();
+    }, [searchOpen]);
+
+    return (
+        <>
+            <nav
+                className={[
+                    "hidden md:flex sticky left-0 right-0 top-0 max-sm:bottom-0 w-full justify-center",
+                    "bg-stone-50/70 dark:bg-stone-950/70 border-b max-sm:border-t border-stone-50 dark:border-b-stone-950 backdrop-blur-md",
+                    "max-h-none overflow-hidden transition[max-height] duration-300 ease-in-out",
+                    menuOpen ? "h-[100dvh]" : "h-16",
+                ].join(" ")}
+            >
+                <div className="flex flex-wrap px-8 items-center max-sm:justify-between lg:gap-2 max-w-[80rem] w-full">
+                    <div className="flex items-center flex-shrink">
+                        <NavLinkLogo prominent href="/" className="-ml-2">
+                            {mainLogo}
+                        </NavLinkLogo>
+                    </div>
+                    {items.map((item, i) =>
+                        "icon" in item ? (
+                            <NavLinkLogo
+                                key={i}
+                                href={item.href}
+                                newTab={item.newTab}
+                            >
+                                {item.icon}
+                            </NavLinkLogo>
+                        ) : (
+                            <NavLink
+                                key={i}
+                                href={item.href}
+                                newTab={item.newTab}
+                                className={cn(
+                                    "max-sm:w-full",
+                                    item.firstOnRight ? "md:ml-auto" : ""
+                                )}
+                            >
+                                {item.title}
+                            </NavLink>
+                        )
+                    )}
+                </div>
+            </nav>
+            <div className="md:hidden px-4 flex items-center self-stretch dark:text-white">
+                <NavLinkLogo prominent href="/" className="mr-auto">
+                    {mainLogo}
+                </NavLinkLogo>
+                <button
+                    className="flex p-3 rounded-xl"
+                    onMouseDown={() => {
+                        setMenuOpen((o) => !o);
+                        setSearchOpen(false);
+                    }}
+                >
+                    <MenuIcon className="" />
+                </button>
+            </div>
+            <div
+                onClick={() => {
+                    setMenuOpen(false);
+                    setSearchOpen(false);
+                }}
+                className={cn(
+                    menuOpen || searchOpen ? "block" : "hidden",
+                    "fixed top-0 bottom-0 left-0 right-0 bg-stone-200/80 dark:bg-black/80 w-full h-full z-10"
+                )}
+            ></div>
+            <nav
+                className={cn(
+                    "md:hidden fixed flex flex-col items-end bottom-4 right-4 z-20",
+                    "bg-stone-50 dark:bg-stone-925 dark:text-white border border-stone-100 dark:border-stone-900 dark:outline dark:outline-1 dark:outline-black/60 rounded-lg shadow-lg",
+                    menuOpen || searchOpen ? "left-4" : ""
+                )}
+            >
+                <div
+                    className={cn(
+                        menuOpen ? "flex" : "hidden",
+                        "flex-wrap px-2 pb-2"
+                    )}
+                >
+                    <div className="flex items-center w-full border-b border-stone-100 dark:border-stone-900">
+                        <NavLinkLogo
+                            prominent
+                            href="/"
+                            className="-ml-4 mr-auto"
+                            onClick={() => setMenuOpen(false)}
+                        >
+                            {mainLogo}
+                        </NavLinkLogo>
+                        {items
+                            .filter((item) => "icon" in item)
+                            .map((item, i) => (
+                                <NavLinkLogo
+                                    key={i}
+                                    href={item.href}
+                                    newTab={item.newTab}
+                                >
+                                    {item.icon}
+                                </NavLinkLogo>
+                            ))}
+                    </div>
+                    {items
+                        .filter((item) => !("icon" in item))
+                        .map((item, i) => (
+                            <NavLink
+                                key={i}
+                                href={item.href}
+                                onClick={() => setMenuOpen(false)}
+                                newTab={item.newTab}
+                                className={cn(
+                                    "max-sm:w-full border-b border-stone-100 dark:border-stone-900",
+                                    item.firstOnRight ? "md:ml-auto" : ""
+                                )}
+                            >
+                                {item.title}
+                            </NavLink>
+                        ))}
+                </div>
+                <div className="flex items-center self-stretch justify-end">
+                    {/* <input
+                        type="text"
+                        className={cn(
+                            menuOpen || searchOpen ? "" : "hidden",
+                            "ml-2 border border-stone-200 dark:border-stone-900 px-2 py-1 rounded w-full"
+                        )}
+                        placeholder="Search docs..."
+                        ref={searchRef}
+                    /> */}
+                    {/* <button
+                        className="flex p-3 rounded-xl"
+                        onClick={() => {
+                            setSearchOpen(true);
+                        }}
+                        onBlur={(e) => {
+                            if (!e.currentTarget.value) {
+                                setSearchOpen(false);
+                            }
+                        }}
+                    >
+                        <SearchIcon className="" />
+                    </button> */}
+                    <button
+                        className="flex p-3 rounded-xl"
+                        onMouseDown={() => {
+                            setMenuOpen((o) => !o);
+                            setSearchOpen(false);
+                        }}
+                    >
+                        {menuOpen || searchOpen ? (
+                            <XIcon />
+                        ) : (
+                            <MenuIcon className="" />
+                        )}
+                    </button>
+                </div>
+            </nav>
+        </>
+    );
+}
+
+export function NavLink({
+    href,
+    className,
+    children,
+    onClick,
+    newTab,
+}: {
+    href: string;
+    className?: string;
+    children: ReactNode;
+    onClick?: () => void;
+    newTab?: boolean;
+}) {
+    const path = usePathname();
+
+    return (
+        <Link
+            href={href}
+            className={cn(
+                "px-2 lg:px-4 py-3 text-sm",
+                className,
+                path === href
+                    ? "font-medium text-black dark:text-white cursor-default"
+                    : "text-stone-600 dark:text-stone-400 hover:text-black dark:hover:text-white transition-colors hover:transition-none"
+            )}
+            onClick={onClick}
+            target={newTab ? "_blank" : undefined}
+        >
+            {children}
+            {newTab ? (
+                <span className="text-stone-300 dark:text-stone-700 relative -top-0.5 -left-0.5">
+                    ⌝
+                </span>
+            ) : (
+                ""
+            )}
+        </Link>
+    );
+}
+
+export function NavLinkLogo({
+    href,
+    className,
+    children,
+    prominent,
+    onClick,
+    newTab,
+}: {
+    href: string;
+    className?: string;
+    children: ReactNode;
+    prominent?: boolean;
+    onClick?: () => void;
+    newTab?: boolean;
+}) {
+    const path = usePathname();
+
+    return (
+        <Link
+            href={href}
+            className={cn(
+                "max-sm:px-4 px-2 lg:px-3 py-3 transition-opacity hover:transition-none",
+                path === href
+                    ? "cursor-default"
+                    : prominent
+                    ? "hover:opacity-50"
+                    : "opacity-60 hover:opacity-100",
+                "text-black dark:text-white",
+                className
+            )}
+            onClick={onClick}
+            target={newTab ? "_blank" : undefined}
+        >
+            {children}
+        </Link>
+    );
+}
+
+export function NewsletterButton() {
+    return (
+        <button
+            onClick={() =>
+                (window as any).ml_account(
+                    "webforms",
+                    "5744530",
+                    "p5o0j8",
+                    "show"
+                )
+            }
+            className="flex px-2 py-1 rounded gap-2 items-center bg-stone-300 hover:bg-stone-200 dark:bg-stone-950 dark:hover:bg-stone-800 text-black dark:text-white"
+        >
+            <MailIcon className="" size="14" /> Subscribe
+        </button>
+    );
+}
+
+{
+    /* <input
+                                    type="email"
+                                    autoComplete="email"
+                                    placeholder="you@example.com"
+                                    className="max-w-[14rem] border border-stone-200 dark:border-stone-900 px-2 py-1 rounded w-full"
+                                /> */
+}
+
+export function Newsletter() {
+    return (
+        <>
+            <div
+                id="mlb2-5744530"
+                className="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-5744530"
+            >
+                <form
+                    className="flex gap-2"
+                    action="https://static.mailerlite.com/webforms/submit/p5o0j8"
+                    data-code="p5o0j8"
+                    method="post"
+                    target="_blank"
+                >
+                    <input
+                        aria-label="email"
+                        aria-required="true"
+                        type="email"
+                        className="text-base form-control max-w-[18rem] border border-stone-300 dark:border-transparent shadow-sm dark:bg-stone-925 px-2 py-1 rounded w-full"
+                        data-inputmask=""
+                        name="fields[email]"
+                        placeholder="Email"
+                        autoComplete="email"
+                    />
+
+                    <input
+                        type="checkbox"
+                        className="hidden"
+                        name="groups[]"
+                        value="112132481"
+                        checked
+                    />
+                    <input
+                        type="checkbox"
+                        className="hidden"
+                        name="groups[]"
+                        value="111453104"
+                    />
+                    <input type="hidden" name="ml-submit" value="1" />
+                    <button
+                        type="submit"
+                        className="flex px-3 py-1 rounded gap-2 items-center shadow-sm bg-stone-925 dark:bg-black hover:bg-stone-800 text-white"
+                    >
+                        <MailIcon className="" size="14" /> Subscribe
+                    </button>
+                    <input type="hidden" name="anticsrf" value="true" />
+                </form>
+                <div
+                    className="ml-form-successBody row-success"
+                    style={{ display: "none" }}
+                >
+                    <div className="ml-form-successContent">
+                        <p>You&apos;re subscribed 🎉</p>
+                    </div>
+                </div>
+            </div>
+            <script
+                dangerouslySetInnerHTML={{
+                    __html: `
+function ml_webform_success_5744530(){var r=ml_jQuery||jQuery;r(".ml-subscribe-form-5744530 .row-success").show(),r(".ml-subscribe-form-5744530 .row-form").hide()}
+`,
+                }}
+            />
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+                src="https://track.mailerlite.com/webforms/o/5744530/p5o0j8?v1697487427"
+                width="1"
+                height="1"
+                style={{
+                    maxWidth: "1px",
+                    maxHeight: "1px",
+                    visibility: "hidden",
+                    padding: 0,
+                    margin: 0,
+                    display: "block",
+                }}
+                alt="."
+            />
+            <script
+                src="https://static.mailerlite.com/js/w/webforms.min.js?vd4de52e171e8eb9c47c0c20caf367ddf"
+                type="text/javascript"
+                defer
+            ></script>
+        </>
+    );
+}

homepage/homepage-jazz/components/pricing.tsx

@@ -0,0 +1,85 @@
+import { ComingSoonBadge, Grid, GridCard, GridItem } from "./forMdx";
+
+export const pricePer1MtxSyncedOut = 1;
+export const pricePer1MtxStored = 2;
+
+export const pricePerTxSyncedOut = pricePer1MtxSyncedOut / 1_000_000;
+export const pricePerTxStored = pricePer1MtxStored / 1_000_000;
+
+export function Pricing() {
+
+    const worstCaseBytesPerTx = 200_000;
+    const avgCaseBytesPerTx = 10_000;
+
+    const worstCaseCostPerTBstorage = 20;
+    const worstCaseCostPerTxStored =
+        worstCaseBytesPerTx * (worstCaseCostPerTBstorage / 1_000_000_000_000);
+    const avgCaseCostPerTxStored =
+        avgCaseBytesPerTx * (worstCaseCostPerTBstorage / 1_000_000_000_000);
+
+    const costPerTBEgress = 5;
+    const serverCost = 30;
+    const txOutPerSecondPerServer = 100;
+    const txPerMonthPerServer = txOutPerSecondPerServer * 60 * 60 * 24 * 30;
+    const worstCaseCostPerTxSyncedOut =
+        worstCaseBytesPerTx * (costPerTBEgress / 1_000_000_000_000) +
+        serverCost / txPerMonthPerServer;
+    const avgCaseCostPerTxSyncedOut =
+        avgCaseBytesPerTx * (costPerTBEgress / 1_000_000_000_000) +
+        serverCost / txPerMonthPerServer;
+
+    const recommendedSyncToStorageRatio = 0.2;
+
+    const freeTierSyncedOut = 100_000;
+    const freeTierStored = freeTierSyncedOut / recommendedSyncToStorageRatio;
+
+    const proTierSyncedOut = 500_000;
+    const proTierStored = proTierSyncedOut / recommendedSyncToStorageRatio;
+
+    return (
+        <Grid>
+            <GridCard>
+                <h3>Free Tier</h3>
+                <p className="text-lg font-medium bg-indigo-200 dark:bg-indigo-800 px-2 py-1 rounded">Until we implement billing all usage of Global Mesh is free!</p>
+                <p className="text-sm">Later, any usage under $2/mo will be free.</p>
+            </GridCard>
+            <GridCard>
+                <h3>Unlimited <ComingSoonBadge/></h3>
+                <p className="text-lg">
+                    {fmt$(pricePer1MtxSyncedOut)} per 1,000,000 transactions
+                    synced out
+                    {/* <br />
+                    Avg cost: {fmt$(avgCaseCostPerTxSyncedOut * 1_000_000)}
+                    <br />
+                    Worst cost: {fmt$(worstCaseCostPerTxSyncedOut * 1_000_000)} */}
+                <br/>
+                    {fmt$(pricePer1MtxStored)}
+                    <small>/mo</small> per 1,000,000 transactions stored
+                    {/* <br />
+                    Avg cost: {fmt$(avgCaseCostPerTxStored * 1_000_000)}
+                    <br />
+                    Worst cost: {fmt$(worstCaseCostPerTxStored * 1_000_000)} */}
+                </p>
+                <p className="text-sm">See below for how transactions are defined.</p>
+            </GridCard>
+            <GridCard>
+                <h3>Enterprise</h3>
+                <p className="text-sm">Custom deployment in the cloud, your private cloud, on-premises or hybrids?</p>
+                <p className="text-sm">SLAs and dedicated support? White-glove integration services?</p>
+            </GridCard>
+        </Grid>
+    );
+}
+
+function fmt(num: number) {
+    return num.toLocaleString("en-US", {});
+}
+
+function fmt$(num: number) {
+    return (
+        "$" +
+        num.toLocaleString("en-US", {
+            maximumSignificantDigits: 3,
+        })
+    );
+}

homepage/homepage-jazz/components/themeProvider.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}