Pre-release

Adopt neverthrow throughout cojson

.changeset/config.json

@@ -12,7 +12,7 @@
             "jazz-react",
             "jazz-nodejs",
             "jazz-run",
-            "cojson-transport-nodejs-ws",
+            "cojson-transport-ws",
             "cojson-storage-indexeddb",
             "cojson-storage-sqlite"
         ]

.changeset/dirty-plants-sniff.md

@@ -0,0 +1,6 @@
+---
+"jazz-tools": patch
+"cojson": patch
+---
+
+First sketch of API for creating and finding unique CoValues

.changeset/pre.json

@@ -0,0 +1,30 @@
+{
+  "mode": "pre",
+  "tag": "unique",
+  "initialVersions": {
+    "jazz-example-chat": "0.0.82-new-auth.1",
+    "jazz-example-chat-clerk": "0.0.80-new-auth.1",
+    "jazz-inspector": "0.0.59",
+    "jazz-example-pets": "0.0.100-new-auth.1",
+    "jazz-example-todo": "0.0.99-new-auth.1",
+    "cojson": "0.7.34",
+    "cojson-storage-indexeddb": "0.7.34",
+    "cojson-storage-sqlite": "0.7.34",
+    "cojson-transport-ws": "0.7.34",
+    "hash-slash": "0.2.0",
+    "jazz-browser": "0.7.35-new-auth.0",
+    "jazz-browser-auth-clerk": "0.7.33-new-auth.0",
+    "jazz-browser-media-images": "0.7.35-new-auth.0",
+    "jazz-nodejs": "0.7.35-new-auth.0",
+    "jazz-react": "0.7.35-new-auth.1",
+    "jazz-react-auth-clerk": "0.7.33-new-auth.1",
+    "jazz-run": "0.7.35-new-auth.0",
+    "jazz-tools": "0.7.35-new-auth.0"
+  },
+  "changesets": [
+    "dirty-plants-sniff",
+    "small-students-buy",
+    "smart-mice-camp",
+    "twelve-lobsters-pull"
+  ]
+}

.changeset/small-students-buy.md

@@ -0,0 +1,6 @@
+---
+"jazz-react-auth-clerk": patch
+"jazz-example-chat-clerk": patch
+---
+
+Implement Clerk auth method + example

.changeset/smart-mice-camp.md

@@ -0,0 +1,8 @@
+---
+"jazz-browser": patch
+"jazz-nodejs": patch
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+Implement new top-level context creation and auth method API

.changeset/twelve-lobsters-pull.md

@@ -0,0 +1,5 @@
+---
+"jazz-react": patch
+---
+
+Make me in useAccount potentially undefined to work with logged out state

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

@@ -3,15 +3,13 @@ name: Build and Deploy
 on:
   push:
     branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
 
 jobs:
   build-examples:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        example: ["chat", "pets", "todo"]
+        example: ["chat", "pets", "todo", "inspector"]
         # example: ["twit", "chat", "counter-js-auth0", "pets", "twit", "file-drop", "inspector"]
 
     steps:
@@ -53,59 +51,12 @@ jobs:
         cache-from: type=gha
         cache-to: type=gha,mode=max
 
-  build-homepage:
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v3
-      with:
-        submodules: true
-
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
-
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-        cache: 'pnpm'
-
-    - 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: Pnpm Install (root)
-      run: |
-        pnpm install
-      working-directory: .
-
-    - name: Pnpm Install & Build (homepage)
-      run: |
-        pnpm install
-        pnpm build;
-      working-directory: ./homepage/homepage
-
-    - name: Docker Build & Push
-      uses: docker/build-push-action@v4
-      with:
-        context: ./homepage
-        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-examples
     strategy:
       matrix:
-        example: ["chat", "pets", "todo"]
+        example: ["chat", "pets", "todo", "inspector"]
         # example: ["twit", "chat", "counter-js-auth0", "pets", "twit", "file-drop", "inspector"]
 
     steps:
@@ -135,37 +86,4 @@ jobs:
         envsubst '${DOCKER_USER} ${DOCKER_PASSWORD} ${DOCKER_TAG} ${BRANCH_SUFFIX} ${BRANCH_SUBDOMAIN}' < job-template.nomad > job-instance.nomad;
         cat job-instance.nomad;
         NOMAD_ADDR=${{ secrets.NOMAD_ADDR }} nomad job run job-instance.nomad;
-      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=${{ secrets.NOMAD_ADDR }} nomad job run job-instance.nomad;
-      working-directory: ./homepage
+      working-directory: ./examples/${{ matrix.example }}

.husky/pre-commit

@@ -1,2 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname "$0")/_/husky.sh"

LICENSE.txt

@@ -0,0 +1,19 @@
+Copyright 2024, Garden Computing, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/chat-clerk/.env

@@ -0,0 +1 @@
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/chat-clerk/.eslintrc.cjs

@@ -9,10 +9,5 @@ module.exports = {
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
+  rules: {},
 }

examples/chat-clerk/CHANGELOG.md

@@ -0,0 +1,735 @@
+# jazz-example-chat
+
+## 0.0.80-unique.2
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.35-unique.2
+  - cojson@0.7.35-unique.2
+  - jazz-react@0.7.35-unique.2
+  - jazz-react-auth-clerk@0.7.33-unique.2
+
+## 0.0.80-new-auth.1
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-new-auth.1
+  - jazz-react-auth-clerk@0.7.33-new-auth.1
+
+## 0.0.80-new-auth.0
+
+### Patch Changes
+
+- Implement Clerk auth method + example
+- Updated dependencies
+- Updated dependencies
+  - jazz-react-auth-clerk@0.7.33-new-auth.0
+  - jazz-react@0.7.35-new-auth.0
+  - jazz-tools@0.7.35-new-auth.0
+
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.32
+  - jazz-react@0.7.32
+
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.31
+  - jazz-react@0.7.31
+  - jazz-tools@0.7.31
+
+## 0.0.77
+
+### Patch Changes
+
+- jazz-react@0.7.30
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.29
+  - jazz-react@0.7.29
+  - jazz-tools@0.7.29
+
+## 0.0.75
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.28
+  - jazz-react@0.7.28
+  - jazz-tools@0.7.28
+
+## 0.0.74
+
+### Patch Changes
+
+- jazz-react@0.7.27
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.26
+  - jazz-react@0.7.26
+  - jazz-tools@0.7.26
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.25
+  - jazz-react@0.7.25
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.24
+  - jazz-react@0.7.24
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.23
+  - jazz-react@0.7.23
+  - jazz-tools@0.7.23
+
+## 0.0.69
+
+### Patch Changes
+
+- jazz-react@0.7.22
+
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.21
+  - jazz-react@0.7.21
+
+## 0.0.67
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.20
+  - jazz-react@0.7.20
+
+## 0.0.66
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.19
+  - jazz-react@0.7.19
+
+## 0.0.65
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.18
+  - jazz-react@0.7.18
+  - jazz-tools@0.7.18
+
+## 0.0.64
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.17
+  - jazz-react@0.7.17
+  - jazz-tools@0.7.17
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.16
+  - jazz-react@0.7.16
+
+## 0.0.62
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.15
+
+## 0.0.61
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.14
+  - jazz-tools@0.7.14
+  - jazz-react@0.7.14
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.13
+  - jazz-react@0.7.13
+
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.12
+  - jazz-react@0.7.12
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.11
+  - jazz-react@0.7.11
+  - jazz-tools@0.7.11
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.10
+  - jazz-react@0.7.10
+  - jazz-tools@0.7.10
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.9
+  - jazz-react@0.7.9
+  - jazz-tools@0.7.9
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.8
+  - jazz-react@0.7.8
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [9fdc91c]
+  - jazz-react@0.7.7
+
+## 0.0.53
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.6
+  - jazz-react@0.7.6
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.5
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.4
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.3
+  - jazz-react@0.7.3
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.2
+
+## 0.0.48
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.1
+  - jazz-react@0.7.1
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [8636319]
+- Updated dependencies [1a35307]
+- Updated dependencies [8636319]
+- Updated dependencies [1a35307]
+- Updated dependencies [96c494f]
+- Updated dependencies [59c18c3]
+- Updated dependencies [19f52b7]
+- Updated dependencies [8636319]
+- Updated dependencies [1a35307]
+- Updated dependencies [d8fe2b1]
+- Updated dependencies [19004b4]
+- Updated dependencies [a78f168]
+- Updated dependencies [1200aae]
+- Updated dependencies [60d5ca2]
+- Updated dependencies [52675c9]
+- Updated dependencies [129e2c1]
+- Updated dependencies [6d49e9b]
+- Updated dependencies [1cfa279]
+- Updated dependencies [704af7d]
+- Updated dependencies [e97f730]
+- Updated dependencies [1a35307]
+- Updated dependencies [460478f]
+- Updated dependencies [6b0418f]
+- Updated dependencies [e299c3e]
+- Updated dependencies [ed5643a]
+- Updated dependencies [bde684f]
+- Updated dependencies [bf0f8ec]
+- Updated dependencies [c4151fc]
+- Updated dependencies [63374cc]
+- Updated dependencies [8636319]
+- Updated dependencies [01ac646]
+- Updated dependencies [a5e68a4]
+- Updated dependencies [8636319]
+- Updated dependencies [952982e]
+- Updated dependencies [1a35307]
+- Updated dependencies [5fa277c]
+- Updated dependencies [60d5ca2]
+- Updated dependencies [21771c4]
+- Updated dependencies [77c2b56]
+- Updated dependencies [63374cc]
+- Updated dependencies [d2e03ff]
+- Updated dependencies [354bdcd]
+- Updated dependencies [ece35b3]
+- Updated dependencies [60d5ca2]
+- Updated dependencies [69ac514]
+- Updated dependencies [f8a5c46]
+- Updated dependencies [f0f6f1b]
+- Updated dependencies [e5eed5b]
+- Updated dependencies [1a44f87]
+- Updated dependencies [627d895]
+- Updated dependencies [1200aae]
+- Updated dependencies [63374cc]
+- Updated dependencies [ece35b3]
+- Updated dependencies [38d4410]
+- Updated dependencies [85d2b62]
+- Updated dependencies [fd86c11]
+- Updated dependencies [52675c9]
+  - jazz-tools@0.7.0
+  - cojson@0.7.0
+  - jazz-react@0.7.0
+  - hash-slash@0.2.0
+
+## 0.0.47-alpha.42
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.42
+  - cojson@0.7.0-alpha.42
+  - jazz-react@0.7.0-alpha.42
+
+## 0.0.47-alpha.41
+
+### Patch Changes
+
+- jazz-tools@0.7.0-alpha.41
+- jazz-react@0.7.0-alpha.41
+
+## 0.0.47-alpha.40
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.40
+
+## 0.0.47-alpha.39
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.0-alpha.39
+  - jazz-react@0.7.0-alpha.39
+  - jazz-tools@0.7.0-alpha.39
+
+## 0.0.47-alpha.38
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.38
+  - jazz-react@0.7.0-alpha.38
+  - cojson@0.7.0-alpha.38
+
+## 0.0.47-alpha.37
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.37
+  - cojson@0.7.0-alpha.37
+  - jazz-tools@0.7.0-alpha.37
+
+## 0.0.47-alpha.36
+
+### Patch Changes
+
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [6b0418f]
+- Updated dependencies [1a35307]
+  - cojson@0.7.0-alpha.36
+  - jazz-tools@0.7.0-alpha.36
+  - jazz-react@0.7.0-alpha.36
+
+## 0.0.47-alpha.35
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - cojson@0.7.0-alpha.35
+  - jazz-tools@0.7.0-alpha.35
+  - jazz-react@0.7.0-alpha.35
+
+## 0.0.47-alpha.34
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.34
+  - jazz-react@0.7.0-alpha.34
+
+## 0.0.47-alpha.33
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.33
+
+## 0.0.47-alpha.32
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.3
+  - jazz-tools@0.7.0-alpha.32
+  - jazz-react@0.7.0-alpha.32
+
+## 0.0.47-alpha.31
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.31
+  - jazz-react@0.7.0-alpha.31
+
+## 0.0.47-alpha.30
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.30
+  - jazz-react@0.7.0-alpha.30
+
+## 0.0.47-alpha.29
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.29
+  - cojson@0.7.0-alpha.29
+  - jazz-react@0.7.0-alpha.29
+
+## 0.0.47-alpha.28
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.28
+  - cojson@0.7.0-alpha.28
+  - jazz-react@0.7.0-alpha.28
+
+## 0.0.47-alpha.27
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.27
+  - cojson@0.7.0-alpha.27
+  - jazz-react@0.7.0-alpha.27
+
+## 0.0.47-alpha.26
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.26
+  - jazz-react@0.7.0-alpha.26
+
+## 0.0.47-alpha.25
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.25
+  - jazz-react@0.7.0-alpha.25
+
+## 0.0.47-alpha.24
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.24
+  - cojson@0.7.0-alpha.24
+  - jazz-react@0.7.0-alpha.24
+
+## 0.0.47-alpha.23
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.23
+  - jazz-react@0.7.0-alpha.23
+
+## 0.0.47-alpha.22
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.22
+  - jazz-react@0.7.0-alpha.22
+
+## 0.0.47-alpha.21
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.21
+  - jazz-tools@0.7.0-alpha.21
+
+## 0.0.47-alpha.20
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.20
+  - jazz-tools@0.7.0-alpha.20
+
+## 0.0.47-alpha.19
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.19
+  - jazz-react@0.7.0-alpha.19
+
+## 0.0.47-alpha.18
+
+### Patch Changes
+
+- jazz-react@0.7.0-alpha.18
+
+## 0.0.47-alpha.17
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.17
+  - jazz-react@0.7.0-alpha.17
+
+## 0.0.47-alpha.16
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.16
+  - jazz-react@0.7.0-alpha.16
+
+## 0.0.47-alpha.15
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.15
+  - jazz-react@0.7.0-alpha.15
+
+## 0.0.47-alpha.14
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.14
+  - jazz-react@0.7.0-alpha.14
+
+## 0.0.47-alpha.13
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.13
+  - jazz-react@0.7.0-alpha.13
+
+## 0.0.47-alpha.12
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.12
+  - jazz-tools@0.7.0-alpha.12
+
+## 0.0.47-alpha.11
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.11
+  - jazz-tools@0.7.0-alpha.11
+  - cojson@0.7.0-alpha.11
+
+## 0.0.47-alpha.10
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.10
+  - jazz-tools@0.7.0-alpha.10
+  - cojson@0.7.0-alpha.10
+
+## 0.0.47-alpha.9
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.9
+  - jazz-tools@0.7.0-alpha.9
+
+## 0.0.47-alpha.8
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.8
+  - jazz-tools@0.7.0-alpha.8
+
+## 0.0.47-alpha.7
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.7
+  - jazz-tools@0.7.0-alpha.7
+  - cojson@0.7.0-alpha.7
+
+## 0.0.47-alpha.6
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.6
+  - jazz-tools@0.7.0-alpha.6
+
+## 0.0.47-alpha.5
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.5
+  - jazz-tools@0.7.0-alpha.5
+  - cojson@0.7.0-alpha.5
+
+## 0.0.47-alpha.4
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.4
+  - jazz-react@0.7.0-alpha.4
+
+## 0.0.47-alpha.3
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.3
+  - jazz-react@0.7.0-alpha.3
+
+## 0.0.47-alpha.2
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.2
+  - jazz-react@0.7.0-alpha.2
+  - jazz-tools@0.7.0-alpha.2
+
+## 0.0.47-alpha.1
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.1
+  - jazz-react@0.7.0-alpha.1
+  - jazz-tools@0.7.0-alpha.1
+  - cojson@0.7.0-alpha.1
+
+## 0.0.47-alpha.0
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.0
+  - jazz-react@0.7.0-alpha.0
+  - jazz-tools@0.7.0-alpha.0
+  - cojson@0.7.0-alpha.0
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/chat-clerk/README.md

@@ -39,4 +39,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 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).
+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 `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/chat-clerk/package.json

@@ -1,26 +1,35 @@
 {
-  "name": "jazz-example-chat-passphrase",
+  "name": "jazz-example-chat-clerk",
   "private": true,
-  "version": "0.0.48-alpha.0",
+  "version": "0.0.80-unique.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "echo 'chat example is codegolfed'",
     "preview": "vite preview"
   },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --fix",
+    "*.{js,jsx,mdx,json}": "prettier --write"
+  },
   "dependencies": {
+    "@clerk/clerk-react": "^5.4.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
-    "@scure/bip39": "^1.2.2",
+    "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cojson": "workspace:*",
     "hash-slash": "workspace:*",
     "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "jazz-react-auth-clerk": "workspace:*",
     "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",
@@ -30,7 +39,6 @@
     "uniqolor": "^1.1.0"
   },
   "devDependencies": {
-    "@types/qrcode": "^1.5.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -41,9 +49,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
-    "react": "^18.2.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^5.0.10"
   }
 }

examples/chat-clerk/src/app.tsx

@@ -0,0 +1,62 @@
+import { CoMap, CoList, co, Group, ID } from "jazz-tools";
+import { createJazzReactApp } from "jazz-react";
+import { JazzClerkAuth } from "jazz-react-auth-clerk";
+import { createRoot } from "react-dom/client";
+import { useIframeHashRouter } from "hash-slash";
+import { ChatScreen } from "./chatScreen.tsx";
+import { StrictMode } from "react";
+
+import { ClerkProvider, SignedIn, useAuth } from "@clerk/clerk-react";
+
+export class Message extends CoMap {
+    text = co.string;
+}
+
+export class Chat extends CoList.Of(co.ref(Message)) {}
+
+const Jazz = createJazzReactApp();
+export const { useAccount, useCoState } = Jazz;
+
+function App() {
+    const { signOut } = useAuth();
+    const { me } = useAccount();
+
+    const createChat = () => {
+        if (!me) return;
+        const group = Group.create({ owner: me });
+        group.addMember("everyone", "writer");
+        const chat = Chat.create([], { owner: group });
+        location.hash = "/chat/" + chat.id;
+    };
+
+    return (
+        <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
+            <div className="rounded mb-5 px-2 py-1 text-sm self-end">
+                {me?.profile?.name} ·{" "}
+                <button onClick={() => signOut()}>Log Out</button>
+            </div>
+            {useIframeHashRouter().route({
+                "/": () => createChat() as never,
+                "/chat/:id": (id) => <ChatScreen chatID={id as ID<Chat>} />,
+            })}
+        </div>
+    );
+}
+
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <ClerkProvider
+            publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
+            afterSignOutUrl="/"
+        >
+            <JazzClerkAuth>
+                <SignedIn>
+                    <Jazz.Provider peer="wss://mesh.jazz.tools/?key=chat-example-jazz-clerk@gcmp.io">
+                        <App />
+                    </Jazz.Provider>
+                </SignedIn>
+                <JazzClerkAuth.BasicUI appName="Chat" />
+            </JazzClerkAuth>
+        </ClerkProvider>
+    </StrictMode>
+);

examples/chat-clerk/src/chatScreen.tsx

@@ -0,0 +1,42 @@
+import { ID } from 'jazz-tools';
+import { Chat, Message, useCoState } from './app.tsx';
+
+export function ChatScreen(props: { chatID: ID<Chat> }) {
+  const chat = useCoState(Chat, props.chatID, [{}]);
+
+  return chat ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
+    {chat.length > 0
+      ? chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
+      : <div className='m-auto text-sm'>(Empty chat)</div>}
+    <ChatInput onSubmit={(text) => {
+      chat.push(
+        Message.create({ text }, { owner: chat._owner })
+      );
+    }} />
+  </div> : <div>Loading...</div>;
+}
+
+function ChatBubble(props: { msg: Message }) {
+  const lastEdit = props.msg._edits.text;
+  const align = lastEdit.by?.isMe ? 'items-end' : 'items-start';
+
+  return <div className={`${align} 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.msg.text }
+    </div>
+    <div className='text-xs text-neutral-500 ml-2'>
+      { lastEdit.by?.profile?.name }{' '}
+      { lastEdit.madeAt?.toLocaleTimeString() }
+    </div>
+  </div>;
+}
+
+function ChatInput(props: { onSubmit: (text: string) => void }) {
+  return <input className='rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 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/CHANGELOG.md

@@ -1,5 +1,411 @@
 # jazz-example-chat
 
+## 0.0.82-unique.2
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.35-unique.2
+  - cojson@0.7.35-unique.2
+  - jazz-react@0.7.35-unique.2
+
+## 0.0.82-new-auth.1
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-new-auth.1
+
+## 0.0.82-new-auth.0
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-new-auth.0
+  - jazz-tools@0.7.35-new-auth.0
+
+## 0.0.81
+
+### Patch Changes
+
+- Updated dependencies [5d91f9f]
+- Updated dependencies [5094e6d]
+- Updated dependencies [b09589b]
+- Updated dependencies [2c3a40c]
+- Updated dependencies [4e16575]
+- Updated dependencies [ea882ab]
+  - cojson@0.7.34
+  - jazz-react@0.7.34
+  - jazz-tools@0.7.34
+
+## 0.0.81-neverthrow.6
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.8
+  - jazz-react@0.7.34-neverthrow.8
+  - jazz-tools@0.7.34-neverthrow.8
+
+## 0.0.81-neverthrow.5
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.7
+  - jazz-react@0.7.34-neverthrow.7
+  - jazz-tools@0.7.34-neverthrow.7
+
+## 0.0.81-neverthrow.4
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.4
+  - jazz-react@0.7.34-neverthrow.4
+  - jazz-tools@0.7.34-neverthrow.4
+
+## 0.0.81-neverthrow.3
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.3
+  - jazz-react@0.7.34-neverthrow.3
+  - jazz-tools@0.7.34-neverthrow.3
+
+## 0.0.81-neverthrow.2
+
+### Patch Changes
+
+- jazz-react@0.7.34-neverthrow.2
+
+## 0.0.81-neverthrow.1
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.1
+  - jazz-react@0.7.34-neverthrow.1
+  - jazz-tools@0.7.34-neverthrow.1
+
+## 0.0.81-neverthrow.0
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.0
+  - jazz-react@0.7.34-neverthrow.0
+  - jazz-tools@0.7.34-neverthrow.0
+
+## 0.0.80
+
+### Patch Changes
+
+- Updated dependencies [b297c93]
+- Updated dependencies [3bf5127]
+- Updated dependencies [a8b74ff]
+- Updated dependencies [db53161]
+  - cojson@0.7.33
+  - jazz-react@0.7.33
+  - jazz-tools@0.7.33
+
+## 0.0.80-hotfixes.5
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.5
+  - jazz-react@0.7.33-hotfixes.5
+  - jazz-tools@0.7.33-hotfixes.5
+
+## 0.0.80-hotfixes.4
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.4
+  - jazz-react@0.7.33-hotfixes.4
+  - jazz-tools@0.7.33-hotfixes.4
+
+## 0.0.80-hotfixes.3
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.3
+  - jazz-react@0.7.33-hotfixes.3
+  - jazz-tools@0.7.33-hotfixes.3
+
+## 0.0.80-hotfixes.2
+
+### Patch Changes
+
+- jazz-react@0.7.33-hotfixes.2
+
+## 0.0.80-hotfixes.1
+
+### Patch Changes
+
+- jazz-react@0.7.33-hotfixes.1
+
+## 0.0.80-hotfixes.0
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.0
+  - jazz-react@0.7.33-hotfixes.0
+  - jazz-tools@0.7.33-hotfixes.0
+
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.32
+  - jazz-react@0.7.32
+
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.31
+  - jazz-react@0.7.31
+  - jazz-tools@0.7.31
+
+## 0.0.77
+
+### Patch Changes
+
+- jazz-react@0.7.30
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.29
+  - jazz-react@0.7.29
+  - jazz-tools@0.7.29
+
+## 0.0.75
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.28
+  - jazz-react@0.7.28
+  - jazz-tools@0.7.28
+
+## 0.0.74
+
+### Patch Changes
+
+- jazz-react@0.7.27
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.26
+  - jazz-react@0.7.26
+  - jazz-tools@0.7.26
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.25
+  - jazz-react@0.7.25
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.24
+  - jazz-react@0.7.24
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.23
+  - jazz-react@0.7.23
+  - jazz-tools@0.7.23
+
+## 0.0.69
+
+### Patch Changes
+
+- jazz-react@0.7.22
+
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.21
+  - jazz-react@0.7.21
+
+## 0.0.67
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.20
+  - jazz-react@0.7.20
+
+## 0.0.66
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.19
+  - jazz-react@0.7.19
+
+## 0.0.65
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.18
+  - jazz-react@0.7.18
+  - jazz-tools@0.7.18
+
+## 0.0.64
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.17
+  - jazz-react@0.7.17
+  - jazz-tools@0.7.17
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.16
+  - jazz-react@0.7.16
+
+## 0.0.62
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.15
+
+## 0.0.61
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.14
+  - jazz-tools@0.7.14
+  - jazz-react@0.7.14
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.13
+  - jazz-react@0.7.13
+
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.12
+  - jazz-react@0.7.12
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.11
+  - jazz-react@0.7.11
+  - jazz-tools@0.7.11
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.10
+  - jazz-react@0.7.10
+  - jazz-tools@0.7.10
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.9
+  - jazz-react@0.7.9
+  - jazz-tools@0.7.9
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.8
+  - jazz-react@0.7.8
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [9fdc91c]
+  - jazz-react@0.7.7
+
+## 0.0.53
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.6
+  - jazz-react@0.7.6
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.5
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.4
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.3
+  - jazz-react@0.7.3
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.2
+
 ## 0.0.48
 
 ### Patch Changes

examples/chat/README.md

@@ -1,12 +1,13 @@
 # Jazz Chat Example
 
-Live version: https://example-chat.jazz.tools
+Live version: [https://chat.jazz.tools](https://chat.jazz.tools)
 
 ## Installing & running the example locally
 
 (this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
 Start by checking out `jazz`
+
 ```bash
 git clone https://github.com/gardencmp/jazz.git
 cd jazz/examples/chat
@@ -34,7 +35,6 @@ pnpm dev
 
 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.

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.48",
+  "version": "0.0.82-unique.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/chat/src/app.tsx

@@ -1,42 +1,50 @@
 import { CoMap, CoList, co, Group, ID } from "jazz-tools";
-import { createJazzReactContext, DemoAuth } from "jazz-react";
+import { createJazzReactApp, DemoAuth } from "jazz-react";
 import { createRoot } from "react-dom/client";
 import { useIframeHashRouter } from "hash-slash";
 import { ChatScreen } from "./chatScreen.tsx";
+import { StrictMode } from "react";
 
 export class Message extends CoMap {
-  text = co.string;
+    text = co.string;
 }
 
 export class Chat extends CoList.Of(co.ref(Message)) {}
 
-const Jazz = createJazzReactContext({
-  auth: DemoAuth({ appName: "Jazz Chat" }),
-  peer: `wss://mesh.jazz.tools/?key=you@example.com`
-});
+const Jazz = createJazzReactApp();
 export const { useAccount, useCoState } = Jazz;
 
-
 function App() {
-  const { me, logOut } = useAccount();
+    const { me } = useAccount();
 
-  const createChat = () => {
-    const group = Group.create({ owner: me });
-    group.addMember("everyone", "writer");
-    const chat = Chat.create([], { owner: group });
-    location.hash = "/chat/" + chat.id;
-  };
+    const createChat = () => {
+        if (!me) return;
+        const group = Group.create({ owner: me });
+        group.addMember("everyone", "writer");
+        const chat = Chat.create([], { owner: group });
+        location.hash = "/chat/" + chat.id;
+    };
 
-  return <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
-    <div className="rounded mb-5 px-2 py-1 text-sm self-end">
-      {me.profile?.name} · <button onClick={logOut}>Log Out</button>
-    </div>
-    {useIframeHashRouter().route({
-      '/': () => createChat() as never,
-      '/chat/:id': (id) => <ChatScreen chatID={id as ID<Chat>} />
-    })}
-  </div>;
+    return (
+        <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
+            <div className="rounded mb-5 px-2 py-1 text-sm self-end">
+                {me?.profile?.name} · {/*<button onClick={logOut}>Log Out</button>*/}
+            </div>
+            {useIframeHashRouter().route({
+                "/": () => createChat() as never,
+                "/chat/:id": (id) => <ChatScreen chatID={id as ID<Chat>} />,
+            })}
+        </div>
+    );
 }
 
-createRoot(document.getElementById("root")!)
-  .render(<Jazz.Provider><App/></Jazz.Provider>);
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <DemoAuth>
+            <DemoAuth.BasicUI appName="Jazz Chat" />
+            <Jazz.Provider peer="wss://mesh.jazz.tools/?key=chat-example-jazz@gcmp.io">
+                <App />
+            </Jazz.Provider>
+        </DemoAuth>
+    </StrictMode>
+);

examples/chat/src/chatScreen.tsx

@@ -2,11 +2,11 @@ import { ID } from 'jazz-tools';
 import { Chat, Message, useCoState } from './app.tsx';
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
-  const chat = useCoState(Chat, props.chatID);
+  const chat = useCoState(Chat, props.chatID, [{}]);
 
   return chat ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
     {chat.length > 0
-      ? chat.map((msg) => msg && <ChatBubble msg={msg} key={msg.id} />)
+      ? chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
       : <div className='m-auto text-sm'>(Empty chat)</div>}
     <ChatInput onSubmit={(text) => {
       chat.push(

examples/inspector/CHANGELOG.md

@@ -0,0 +1,232 @@
+# jazz-example-chat
+
+## 0.0.60-unique.0
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.35-unique.2
+  - cojson-transport-ws@0.7.35-unique.2
+
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies [5d91f9f]
+- Updated dependencies [5094e6d]
+- Updated dependencies [b09589b]
+- Updated dependencies [2c3a40c]
+- Updated dependencies [406ab9b]
+- Updated dependencies [4e16575]
+- Updated dependencies [ea882ab]
+  - cojson@0.7.34
+  - cojson-transport-ws@0.7.34
+
+## 0.0.59-neverthrow.6
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.8
+  - cojson-transport-ws@0.7.34-neverthrow.8
+
+## 0.0.59-neverthrow.5
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.7
+  - cojson-transport-ws@0.7.34-neverthrow.7
+
+## 0.0.59-neverthrow.4
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.4
+  - cojson-transport-ws@0.7.34-neverthrow.4
+
+## 0.0.59-neverthrow.3
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.3
+  - cojson-transport-ws@0.7.34-neverthrow.3
+
+## 0.0.59-neverthrow.2
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson-transport-ws@0.7.34-neverthrow.2
+
+## 0.0.59-neverthrow.1
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.1
+  - cojson-transport-ws@0.7.34-neverthrow.1
+
+## 0.0.59-neverthrow.0
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.0
+  - cojson-transport-ws@0.7.34-neverthrow.0
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [fdde8db]
+- Updated dependencies [b297c93]
+- Updated dependencies [07fe2b9]
+- Updated dependencies [3bf5127]
+- Updated dependencies [a8b74ff]
+- Updated dependencies [db53161]
+  - cojson-transport-ws@0.7.33
+  - cojson@0.7.33
+
+## 0.0.58-hotfixes.5
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.5
+  - cojson-transport-ws@0.7.33-hotfixes.5
+
+## 0.0.58-hotfixes.4
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.4
+  - cojson-transport-ws@0.7.33-hotfixes.4
+
+## 0.0.58-hotfixes.3
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson-transport-ws@0.7.33-hotfixes.3
+  - cojson@0.7.33-hotfixes.3
+
+## 0.0.58-hotfixes.2
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson-transport-ws@0.7.33-hotfixes.2
+
+## 0.0.58-hotfixes.1
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson-transport-ws@0.7.33-hotfixes.1
+
+## 0.0.58-hotfixes.0
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.0
+  - cojson-transport-ws@0.7.33-hotfixes.0
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - cojson-transport-ws@0.7.31
+  - cojson@0.7.31
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson-transport-ws@0.7.30
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.29
+  - cojson-transport-ws@0.7.29
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.28
+  - cojson-transport-ws@0.7.28
+
+## 0.0.53
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson-transport-ws@0.7.27
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.26
+  - cojson-transport-ws@0.7.26
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.23
+  - cojson-transport-ws@0.7.23
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson-transport-ws@0.7.22
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.18
+  - cojson-transport-ws@0.7.18
+
+## 0.0.48
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.17
+  - cojson-transport-ws@0.7.17
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.6.7
+  - jazz-react@0.5.5
+  - jazz-react-auth-local@0.4.18
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/inspector/README.md

@@ -0,0 +1,7 @@
+# Jazz Inspector
+
+Live address: https://inspector.jazz.tools
+
+Use this to visually inspect a Jazz account or other CoValue.
+
+For now, you can get your account credentials from the `jazz-logged-in-secret` local-storage key from within your Jazz app.

examples/inspector/index.html

@@ -0,0 +1,17 @@
+<!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 Inspector</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/app.tsx"></script>
+</body>
+
+</html>

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "inspector",
+  "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.47",
+  "version": "0.0.60-unique.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,9 +17,8 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "hash-slash": "workspace:*",
-    "jazz-react": "workspace:*",
-    "jazz-react-auth-local": "workspace:*",
     "cojson": "workspace:*",
+    "cojson-transport-ws": "workspace:*",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/inspector/src/app.tsx

@@ -0,0 +1,4 @@
+import ReactDOM from "react-dom/client";
+import App from "./viewer/new-app";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

examples/inspector/src/index.css

@@ -0,0 +1,92 @@
+@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;
+    }
+}
+
+.animate-in {
+    animation: slideIn 0.3s ease-out;
+}
+@keyframes slideIn {
+    from {
+        transform: translateZ(400px) translateY(30px) scale(1.05);
+        opacity: 0.4;
+    }
+    to {
+        transform: translateZ(0) scale(1);
+        opacity: 1;
+    }
+}

examples/inspector/src/link-icon.tsx

@@ -0,0 +1,18 @@
+export function LinkIcon() {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-3 h-3"
+        >
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+            />
+        </svg>
+    );
+}

examples/inspector/src/viewer/breadcrumbs.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { PageInfo } from "./types";
+
+interface BreadcrumbsProps {
+    path: PageInfo[];
+    onBreadcrumbClick: (index: number) => void;
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+    path,
+    onBreadcrumbClick,
+}) => {
+    return (
+        <div className="z-20 relative bg-indigo-400/10 backdrop-blur-sm rounded-lg inline-flex px-2 py-1 whitespace-pre transition-all items-center space-x-1 min-h-10">
+            <button
+                onClick={() => onBreadcrumbClick(-1)}
+                className="flex items-center justify-center p-1 rounded-sm hover:bg-indigo-500/10 transition-colors"
+                aria-label="Go to home"
+            >
+                <img src="jazz-logo.png" alt="Jazz Logo" className="size-5" />
+            </button>
+            {path.map((page, index) => {
+                return (
+                    <span
+                        key={index}
+                        className="inline-block first:pl-1 last:pr-1"
+                    >
+                        {index === 0 ? null : (
+                            <span className="text-indigo-500/30">{" / "}</span>
+                        )}
+                        <button
+                            onClick={() => onBreadcrumbClick(index)}
+                            className="text-indigo-700 hover:underline"
+                        >
+                            {index === 0 ? page.name || "Root" : page.name}
+                        </button>
+                    </span>
+                );
+            })}
+        </div>
+    );
+};

examples/inspector/src/viewer/co-stream-view.tsx

@@ -0,0 +1,353 @@
+import {
+    CoID,
+    LocalNode,
+    RawBinaryCoStream,
+    RawCoStream,
+    RawCoValue,
+} from "cojson";
+import { JsonObject, JsonValue } from "cojson/src/jsonValue";
+import { PageInfo } from "./types";
+import { base64URLtoBytes } from "cojson/src/base64url";
+import { useEffect, useState } from "react";
+import { ArrowDownToLine } from "lucide-react";
+import {
+    BinaryStreamItem,
+    BinaryStreamStart,
+    CoStreamItem,
+} from "cojson/src/coValues/coStream";
+import { AccountOrGroupPreview } from "./value-renderer";
+
+// typeguard for BinaryStreamStart
+function isBinaryStreamStart(item: unknown): item is BinaryStreamStart {
+    return (
+        typeof item === "object" &&
+        item !== null &&
+        "type" in item &&
+        item.type === "start"
+    );
+}
+
+function detectCoStreamType(value: RawCoStream | RawBinaryCoStream) {
+    const firstKey = Object.keys(value.items)[0];
+    if (!firstKey)
+        return {
+            type: "unknown",
+        };
+
+    const items = value.items[firstKey as never]?.map((v) => v.value);
+
+    if (!items)
+        return {
+            type: "unknown",
+        };
+    const firstItem = items[0];
+    if (!firstItem)
+        return {
+            type: "unknown",
+        };
+    // This is a binary stream
+    if (isBinaryStreamStart(firstItem)) {
+        return {
+            type: "binary",
+            items: items as BinaryStreamItem[],
+        };
+    } else {
+        return {
+            type: "coStream",
+        };
+    }
+}
+
+async function getBlobFromCoStream({
+    items,
+    onlyFirstChunk = false,
+}: {
+    items: BinaryStreamItem[];
+    onlyFirstChunk?: boolean;
+}) {
+    if (onlyFirstChunk && items.length > 1) {
+        items = items.slice(0, 2);
+    }
+
+    const chunks: Uint8Array[] = [];
+
+    const binary_U_prefixLength = 8;
+
+    let lastProgressUpdate = Date.now();
+
+    for (const item of items.slice(1)) {
+        if (item.type === "end") {
+            break;
+        }
+
+        if (item.type !== "chunk") {
+            console.error("Invalid binary stream chunk", item);
+            return undefined;
+        }
+
+        const chunk = base64URLtoBytes(item.chunk.slice(binary_U_prefixLength));
+        // totalLength += chunk.length;
+        chunks.push(chunk);
+
+        if (Date.now() - lastProgressUpdate > 100) {
+            lastProgressUpdate = Date.now();
+        }
+    }
+    const defaultMime = "mimeType" in items[0] ? items[0].mimeType : null;
+
+    const blob = new Blob(chunks, defaultMime ? { type: defaultMime } : {});
+
+    const mimeType =
+        defaultMime === "" ? await detectPDFMimeType(blob) : defaultMime;
+
+    return {
+        blob,
+        mimeType: mimeType as string,
+        unfinishedChunks: items.length > 1,
+        totalSize:
+            "totalSizeBytes" in items[0]
+                ? (items[0].totalSizeBytes as number)
+                : undefined,
+    };
+}
+
+const detectPDFMimeType = async (blob: Blob): Promise<string> => {
+    const arrayBuffer = await blob.slice(0, 4).arrayBuffer();
+    const uint8Array = new Uint8Array(arrayBuffer);
+    const header = uint8Array.reduce(
+        (acc, byte) => acc + String.fromCharCode(byte),
+        "",
+    );
+
+    if (header === "%PDF") {
+        return "application/pdf";
+    }
+    return "application/octet-stream";
+};
+
+const BinaryDownloadButton = ({
+    pdfBlob,
+    fileName = "document",
+    label,
+    mimeType,
+}: {
+    pdfBlob: Blob;
+    mimeType?: string;
+    fileName?: string;
+    label: string;
+}) => {
+    const downloadFile = () => {
+        const url = URL.createObjectURL(
+            new Blob([pdfBlob], mimeType ? { type: mimeType } : {}),
+        );
+        const link = document.createElement("a");
+        link.href = url;
+        link.download =
+            mimeType === "application/pdf" ? `${fileName}.pdf` : fileName;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    };
+
+    return (
+        <button
+            className="flex items-center gap-2 px-2 py-1 text-gray-900 border border-gray-900/10 bg-clip-border shadow-sm transition-colors rounded bg-gray-50 text-sm"
+            onClick={downloadFile}
+        >
+            <ArrowDownToLine size={16} />
+            {label}
+            {/* Download {mimeType === "application/pdf" ? "PDF" : "File"} */}
+        </button>
+    );
+};
+
+const LabelContentPair = ({
+    label,
+    content,
+}: {
+    label: string;
+    content: React.ReactNode;
+}) => {
+    return (
+        <div className="flex flex-col gap-1.5 ">
+            <span className="uppercase text-xs font-medium text-gray-600 tracking-wide">
+                {label}
+            </span>
+            <span>{content}</span>
+        </div>
+    );
+};
+
+function RenderCoBinaryStream({
+    value,
+    items,
+}: {
+    items: BinaryStreamItem[];
+    value: RawBinaryCoStream;
+}) {
+    const [file, setFile] = useState<
+        | {
+              blob: Blob;
+              mimeType: string;
+              unfinishedChunks: boolean;
+              totalSize: number | undefined;
+          }
+        | undefined
+        | null
+    >(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        // load only the first chunk to get the mime type and size
+        getBlobFromCoStream({
+            items,
+            onlyFirstChunk: true,
+        })
+            .then((v) => {
+                if (v) {
+                    setFile(v);
+                    if (v.mimeType.includes("image")) {
+                        // If it's an image, load the full blob
+                        getBlobFromCoStream({
+                            items,
+                        }).then((s) => {
+                            if (s) setFile(s);
+                        });
+                    }
+                }
+            })
+            .finally(() => setIsLoading(false));
+    }, [items]);
+
+    if (!isLoading && !file) return <div>No blob</div>;
+
+    if (isLoading) return <div>Loading...</div>;
+    if (!file) return <div>No blob</div>;
+
+    const { blob, mimeType } = file;
+
+    const sizeInKB = (file.totalSize || 0) / 1024;
+
+    return (
+        <div className="space-y-8 mt-4">
+            <div className="grid grid-cols-3 gap-2 max-w-3xl">
+                <LabelContentPair
+                    label="Mime Type"
+                    content={
+                        <span className="font-mono bg-gray-100 rounded px-2 py-1 text-sm">
+                            {mimeType || "No mime type"}
+                        </span>
+                    }
+                />
+                <LabelContentPair
+                    label="Size"
+                    content={<span>{sizeInKB.toFixed(2)} KB</span>}
+                />
+                <LabelContentPair
+                    label="Download"
+                    content={
+                        <BinaryDownloadButton
+                            fileName={value.id.toString()}
+                            pdfBlob={blob}
+                            mimeType={mimeType}
+                            label={
+                                mimeType === "application/pdf"
+                                    ? "Download PDF"
+                                    : "Download File"
+                            }
+                        />
+                    }
+                />
+            </div>
+            {mimeType === "image/png" || mimeType === "image/jpeg" ? (
+                <LabelContentPair
+                    label="Preview"
+                    content={
+                        <div className="bg-gray-50 p-3 rounded-sm">
+                            <RenderBlobImage blob={blob} />
+                        </div>
+                    }
+                />
+            ) : null}
+        </div>
+    );
+}
+
+function RenderCoStream({
+    value,
+    node,
+}: {
+    value: RawCoStream;
+    node: LocalNode;
+}) {
+    const streamPerUser = Object.keys(value.items);
+    const userCoIds = streamPerUser.map(
+        (stream) => stream.split("_session")[0],
+    );
+
+    return (
+        <div className="grid grid-cols-3 gap-2">
+            {userCoIds.map((id, idx) => (
+                <div
+                    className="bg-gray-100 p-3 rounded-lg transition-colors overflow-hidden bg-white border hover:bg-gray-100/5 cursor-pointer shadow-sm"
+                    key={id}
+                >
+                    <AccountOrGroupPreview
+                        coId={id as CoID<RawCoValue>}
+                        node={node}
+                    />
+                    {/* @ts-expect-error - TODO: fix types */}
+                    {value.items[streamPerUser[idx]]?.map(
+                        (item: CoStreamItem<JsonValue>) => (
+                            <div>
+                                {new Date(item.madeAt).toLocaleString()}{" "}
+                                {JSON.stringify(item.value)}
+                            </div>
+                        ),
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export function CoStreamView({
+    value,
+    node,
+}: {
+    data: JsonObject;
+    onNavigate: (pages: PageInfo[]) => void;
+    node: LocalNode;
+    value: RawCoStream;
+}) {
+    // if (!value) return <div>No value</div>;
+
+    const streamType = detectCoStreamType(value);
+
+    if (streamType.type === "binary") {
+        if (streamType.items === undefined) {
+            return <div>No binary stream</div>;
+        }
+
+        return (
+            <RenderCoBinaryStream
+                value={value as RawBinaryCoStream}
+                items={streamType.items}
+            />
+        );
+    }
+
+    if (streamType.type === "coStream") {
+        return <RenderCoStream value={value} node={node} />;
+    }
+
+    if (streamType.type === "unknown") return <div>Unknown stream type</div>;
+
+    return <div>Unknown stream type</div>;
+}
+
+function RenderBlobImage({ blob }: { blob: Blob }) {
+    const urlCreator = window.URL || window.webkitURL;
+    return <img src={urlCreator.createObjectURL(blob)} />;
+}

examples/inspector/src/viewer/grid-view.tsx

@@ -0,0 +1,73 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import { JsonObject } from "cojson/src/jsonValue";
+import { CoMapPreview, ValueRenderer } from "./value-renderer";
+import clsx from "clsx";
+import { PageInfo, isCoId } from "./types";
+import { ResolveIcon } from "./type-icon";
+
+export function GridView({
+    data,
+    onNavigate,
+    node,
+}: {
+    data: JsonObject;
+    onNavigate: (pages: PageInfo[]) => void;
+    node: LocalNode;
+}) {
+    const entries = Object.entries(data);
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-2">
+            {entries.map(([key, child], childIndex) => (
+                <div
+                    key={childIndex}
+                    className={clsx(
+                        "bg-gray-100 p-3 rounded-lg transition-colors overflow-hidden",
+                        isCoId(child)
+                            ? "bg-white border hover:bg-gray-100/5 cursor-pointer shadow-sm"
+                            : "bg-gray-50",
+                    )}
+                    onClick={() =>
+                        isCoId(child) &&
+                        onNavigate([
+                            { coId: child as CoID<RawCoValue>, name: key },
+                        ])
+                    }
+                >
+                    <h3 className="truncate">
+                        {isCoId(child) ? (
+                            <span className="font-medium flex justify-between">
+                                {key}
+
+                                <div className="px-2 py-1 text-xs bg-gray-100 rounded">
+                                    <ResolveIcon
+                                        coId={child as CoID<RawCoValue>}
+                                        node={node}
+                                    />
+                                </div>
+                            </span>
+                        ) : (
+                            <span>{key}</span>
+                        )}
+                    </h3>
+                    <div className="mt-2 text-sm">
+                        {isCoId(child) ? (
+                            <CoMapPreview
+                                coId={child as CoID<RawCoValue>}
+                                node={node}
+                            />
+                        ) : (
+                            <ValueRenderer
+                                json={child}
+                                onCoIDClick={(coId) => {
+                                    onNavigate([{ coId, name: key }]);
+                                }}
+                                compact
+                            />
+                        )}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}

examples/inspector/src/viewer/index.tsx

@@ -0,0 +1,27 @@
+import { LocalNode } from "cojson";
+import { Breadcrumbs } from "./breadcrumbs";
+import { usePagePath } from "./use-page-path";
+import { PageInfo } from "./types";
+import { PageStack } from "./page-stack";
+
+export default function CoJsonViewer({
+    defaultPath,
+    node,
+}: {
+    defaultPath?: PageInfo[];
+    node: LocalNode;
+}) {
+    const { path, addPages, goToIndex, goBack } = usePagePath(defaultPath);
+
+    return (
+        <div className="w-full h-screen bg-gray-100 p-4 overflow-hidden">
+            <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
+            <PageStack
+                path={path}
+                node={node}
+                goBack={goBack}
+                addPages={addPages}
+            />
+        </div>
+    );
+}

examples/inspector/src/viewer/new-app.tsx

@@ -0,0 +1,310 @@
+import React, { useState, useEffect } from "react";
+import {
+    LocalNode,
+    CoID,
+    RawCoValue,
+    RawAccount,
+    AgentSecret,
+    RawAccountID,
+    cojsonInternals,
+    WasmCrypto,
+} from "cojson";
+import { createWebSocketPeer } from "cojson-transport-ws";
+import { Trash2 } from "lucide-react";
+import { Breadcrumbs } from "./breadcrumbs";
+import { usePagePath } from "./use-page-path";
+import { PageStack } from "./page-stack";
+import { resolveCoValue, useResolvedCoValue } from "./use-resolve-covalue";
+import clsx from "clsx";
+
+interface Account {
+    id: CoID<RawAccount>;
+    secret: AgentSecret;
+}
+
+export default function CoJsonViewerApp() {
+    const [accounts, setAccounts] = useState<Account[]>(() => {
+        const storedAccounts = localStorage.getItem("inspectorAccounts");
+        return storedAccounts ? JSON.parse(storedAccounts) : [];
+    });
+    const [currentAccount, setCurrentAccount] = useState<Account | null>(() => {
+        const lastSelectedId = localStorage.getItem("lastSelectedAccountId");
+        if (lastSelectedId) {
+            const lastAccount = accounts.find(
+                (account) => account.id === lastSelectedId,
+            );
+            return lastAccount || null;
+        }
+        return null;
+    });
+    const [localNode, setLocalNode] = useState<LocalNode | null>(null);
+    const [coValueId, setCoValueId] = useState<CoID<RawCoValue> | "">("");
+    const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
+
+    useEffect(() => {
+        localStorage.setItem("inspectorAccounts", JSON.stringify(accounts));
+    }, [accounts]);
+
+    useEffect(() => {
+        if (currentAccount) {
+            localStorage.setItem("lastSelectedAccountId", currentAccount.id);
+        } else {
+            localStorage.removeItem("lastSelectedAccountId");
+        }
+    }, [currentAccount]);
+
+    useEffect(() => {
+        if (!currentAccount) {
+            setLocalNode(null);
+            goToIndex(-1);
+            return;
+        }
+
+        WasmCrypto.create().then(async (crypto) => {
+            const wsPeer = createWebSocketPeer({
+                id: "mesh",
+                websocket: new WebSocket("wss://mesh.jazz.tools"),
+                role: "server",
+            });
+            const node = await LocalNode.withLoadedAccount({
+                accountID: currentAccount.id,
+                accountSecret: currentAccount.secret,
+                sessionID: cojsonInternals.newRandomSessionID(
+                    currentAccount.id,
+                ),
+                peersToLoadFrom: [wsPeer],
+                crypto,
+                migration: async () => {
+                    console.log("Not running any migration in inspector");
+                },
+            });
+            setLocalNode(node);
+        });
+    }, [currentAccount, goToIndex]);
+
+    const addAccount = (id: RawAccountID, secret: AgentSecret) => {
+        const newAccount = { id, secret };
+        setAccounts([...accounts, newAccount]);
+        setCurrentAccount(newAccount);
+    };
+
+    const deleteCurrentAccount = () => {
+        if (currentAccount) {
+            const updatedAccounts = accounts.filter(
+                (account) => account.id !== currentAccount.id,
+            );
+            setAccounts(updatedAccounts);
+            setCurrentAccount(
+                updatedAccounts.length > 0 ? updatedAccounts[0] : null,
+            );
+        }
+    };
+
+    const handleCoValueIdSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (coValueId) {
+            setPage(coValueId);
+        }
+    };
+
+    return (
+        <div className="w-full h-screen bg-gray-100 p-4 overflow-hidden flex flex-col">
+            <div className="flex justify-between items-center mb-4">
+                <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
+                <AccountSwitcher
+                    accounts={accounts}
+                    currentAccount={currentAccount}
+                    setCurrentAccount={setCurrentAccount}
+                    deleteCurrentAccount={deleteCurrentAccount}
+                    localNode={localNode}
+                />
+            </div>
+
+            <PageStack
+                path={path}
+                node={localNode}
+                goBack={goBack}
+                addPages={addPages}
+            >
+                {!currentAccount ? (
+                    <AddAccountForm addAccount={addAccount} />
+                ) : (
+                    <form
+                        onSubmit={handleCoValueIdSubmit}
+                        aria-hidden={path.length !== 0}
+                        className={clsx(
+                            "flex flex-col justify-center items-center gap-2 h-full w-full mb-20 ",
+                            "transition-all duration-150",
+                            path.length > 0
+                                ? "opacity-0 -translate-y-2 scale-95"
+                                : "opacity-100",
+                        )}
+                    >
+                        <fieldset className="flex flex-col gap-2 text-sm">
+                            <h2 className="text-3xl font-medium text-gray-950 text-center mb-4">
+                                Jazz CoValue Inspector
+                            </h2>
+                            <input
+                                className="border p-4 rounded-lg min-w-[21rem] font-mono"
+                                placeholder="co_z1234567890abcdef123456789"
+                                value={coValueId}
+                                onChange={(e) =>
+                                    setCoValueId(
+                                        e.target.value as CoID<RawCoValue>,
+                                    )
+                                }
+                            />
+                            <button
+                                type="submit"
+                                className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-4 py-2 rounded-md"
+                            >
+                                Inspect
+                            </button>
+                            <hr />
+                            <button
+                                type="button"
+                                className="border inline-block px-2 py-1.5 text-black rounded"
+                                onClick={() => {
+                                    setCoValueId(currentAccount.id);
+                                    setPage(currentAccount.id);
+                                }}
+                            >
+                                Inspect My Account
+                            </button>
+                        </fieldset>
+                    </form>
+                )}
+            </PageStack>
+        </div>
+    );
+}
+
+function AccountSwitcher({
+    accounts,
+    currentAccount,
+    setCurrentAccount,
+    deleteCurrentAccount,
+    localNode,
+}: {
+    accounts: Account[];
+    currentAccount: Account | null;
+    setCurrentAccount: (account: Account | null) => void;
+    deleteCurrentAccount: () => void;
+    localNode: LocalNode | null;
+}) {
+    return (
+        <div className="relative flex items-center gap-1">
+            <select
+                value={currentAccount?.id || "add-account"}
+                onChange={(e) => {
+                    if (e.target.value === "add-account") {
+                        setCurrentAccount(null);
+                    } else {
+                        const account = accounts.find(
+                            (a) => a.id === e.target.value,
+                        );
+                        setCurrentAccount(account || null);
+                    }
+                }}
+                className="p-2 px-4 bg-gray-100/50 border border-indigo-500/10 backdrop-blur-sm rounded-md text-indigo-700 appearance-none"
+            >
+                {accounts.map((account) => (
+                    <option key={account.id} value={account.id}>
+                        {localNode ? (
+                            <AccountNameDisplay
+                                accountId={account.id}
+                                node={localNode}
+                            />
+                        ) : (
+                            account.id
+                        )}
+                    </option>
+                ))}
+                <option value="add-account">Add account</option>
+            </select>
+            {currentAccount && (
+                <button
+                    onClick={deleteCurrentAccount}
+                    className="p-3 rounded hover:bg-gray-200 transition-colors"
+                    title="Delete Account"
+                >
+                    <Trash2 size={16} className="text-gray-500" />
+                </button>
+            )}
+        </div>
+    );
+}
+
+function AddAccountForm({
+    addAccount,
+}: {
+    addAccount: (id: RawAccountID, secret: AgentSecret) => void;
+}) {
+    const [id, setId] = useState("");
+    const [secret, setSecret] = useState("");
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        addAccount(id as RawAccountID, secret as AgentSecret);
+        setId("");
+        setSecret("");
+    };
+
+    return (
+        <form
+            onSubmit={handleSubmit}
+            className="flex flex-col gap-2 max-w-md mx-auto h-full justify-center"
+        >
+            <h2 className="text-2xl font-medium text-gray-900 mb-3">
+                Add an Account to Inspect
+            </h2>
+            <input
+                className="border py-2 px-3 rounded-md"
+                placeholder="Account ID"
+                value={id}
+                onChange={(e) => setId(e.target.value)}
+            />
+            <input
+                type="password"
+                className="border py-2 px-3 rounded-md"
+                placeholder="Account Secret"
+                value={secret}
+                onChange={(e) => setSecret(e.target.value)}
+            />
+            <button
+                type="submit"
+                className="bg-indigo-500 text-white px-4 py-2 rounded-md"
+            >
+                Add Account
+            </button>
+        </form>
+    );
+}
+
+function AccountNameDisplay({
+    accountId,
+    node,
+}: {
+    accountId: CoID<RawAccount>;
+    node: LocalNode;
+}) {
+    const { snapshot } = useResolvedCoValue(accountId, node);
+    const [name, setName] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (snapshot && typeof snapshot === "object" && "profile" in snapshot) {
+            const profileId = snapshot.profile as CoID<RawCoValue>;
+            resolveCoValue(profileId, node).then((profileResult) => {
+                if (
+                    profileResult.snapshot &&
+                    typeof profileResult.snapshot === "object" &&
+                    "name" in profileResult.snapshot
+                ) {
+                    setName(profileResult.snapshot.name as string);
+                }
+            });
+        }
+    }, [snapshot, node]);
+
+    return name ? `${name} <${accountId}>` : accountId;
+}

examples/inspector/src/viewer/page-stack.tsx

@@ -0,0 +1,55 @@
+import { Page } from "./page"; // Assuming you have a Page component
+import { CoID, LocalNode, RawCoValue } from "cojson";
+
+// Define the structure of a page in the path
+interface PageInfo {
+    coId: CoID<RawCoValue>;
+    name?: string;
+}
+
+// Props for the PageStack component
+interface PageStackProps {
+    path: PageInfo[];
+    node?: LocalNode | null;
+    goBack: () => void;
+    addPages: (pages: PageInfo[]) => void;
+    children?: React.ReactNode;
+}
+
+export function PageStack({
+    path,
+    node,
+    goBack,
+    addPages,
+    children,
+}: PageStackProps) {
+    return (
+        <div className="relative mt-4 h-[calc(100vh-6rem)]">
+            {children && (
+                <div className="absolute inset-0 pb-20">{children}</div>
+            )}
+            {node &&
+                path.map((page, index) => (
+                    <Page
+                        key={`${page.coId}-${index}`}
+                        coId={page.coId}
+                        node={node}
+                        name={page.name || page.coId}
+                        onHeaderClick={goBack}
+                        onNavigate={addPages}
+                        isTopLevel={index === path.length - 1}
+                        style={{
+                            transform: `translateZ(${(index - path.length + 1) * 200}px) scale(${
+                                1 - (path.length - index - 1) * 0.05
+                            }) translateY(${-(index - path.length + 1) * -4}%)`,
+                            opacity: 1 - (path.length - index - 1) * 0.05,
+                            zIndex: index,
+                            transitionProperty: "transform, opacity",
+                            transitionDuration: "0.3s",
+                            transitionTimingFunction: "ease-out",
+                        }}
+                    />
+                ))}
+        </div>
+    );
+}

examples/inspector/src/viewer/page.tsx

@@ -0,0 +1,154 @@
+import clsx from "clsx";
+import { CoID, LocalNode, RawCoStream, RawCoValue } from "cojson";
+import { useEffect, useState } from "react";
+import { useResolvedCoValue } from "./use-resolve-covalue";
+import { GridView } from "./grid-view";
+import { PageInfo } from "./types";
+import { TableView } from "./table-viewer";
+import { TypeIcon } from "./type-icon";
+import { CoStreamView } from "./co-stream-view";
+import { AccountOrGroupPreview } from "./value-renderer";
+
+type PageProps = {
+    coId: CoID<RawCoValue>;
+    node: LocalNode;
+    name: string;
+    onNavigate: (newPages: PageInfo[]) => void;
+    onHeaderClick?: () => void;
+    isTopLevel?: boolean;
+    style: React.CSSProperties;
+};
+
+export function Page({
+    coId,
+    node,
+    name,
+    onNavigate,
+    onHeaderClick,
+    style,
+    isTopLevel,
+}: PageProps) {
+    const { value, snapshot, type, extendedType } = useResolvedCoValue(
+        coId,
+        node,
+    );
+    const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
+
+    const supportsTableView = type === "colist" || extendedType === "record";
+
+    // Automatically switch to table view if the page is a CoMap record
+    useEffect(() => {
+        if (supportsTableView) {
+            setViewMode("table");
+        }
+    }, [supportsTableView]);
+
+    if (snapshot === "unavailable") {
+        return <div style={style}>Data unavailable</div>;
+    }
+
+    if (!snapshot) {
+        return <div style={style}></div>;
+    }
+
+    return (
+        <div
+            style={style}
+            className={clsx(
+                "absolute inset-0 border border-gray-900/5 bg-clip-padding bg-white rounded-xl shadow-lg p-6 animate-in",
+            )}
+        >
+            {!isTopLevel && (
+                <div
+                    className="absolute inset-x-0 top-0 h-10"
+                    aria-label="Back"
+                    onClick={() => {
+                        onHeaderClick?.();
+                    }}
+                    aria-hidden="true"
+                ></div>
+            )}
+            <div className="flex justify-between items-center mb-4">
+                <div className="flex flex-col gap-2">
+                    <h2 className="text-2xl font-bold flex items-start flex-col gap-1">
+                        <span>
+                            {name}
+                            {typeof snapshot === "object" &&
+                            "name" in snapshot ? (
+                                <span className="text-gray-600 font-medium">
+                                    {" "}
+                                    {
+                                        (
+                                            snapshot as {
+                                                name: string;
+                                            }
+                                        ).name
+                                    }
+                                </span>
+                            ) : null}
+                        </span>
+                    </h2>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs text-gray-700 font-medium py-0.5 px-1 -ml-0.5 rounded bg-gray-700/5 inline-block font-mono">
+                            {type && (
+                                <TypeIcon
+                                    type={type}
+                                    extendedType={extendedType}
+                                />
+                            )}
+                        </span>
+                        <span className="text-xs text-gray-700 font-medium py-0.5 px-1 -ml-0.5 rounded bg-gray-700/5 inline-block font-mono">
+                            {coId}
+                        </span>
+                    </div>
+                </div>
+                {/* {supportsTableView && (
+          <button
+            onClick={toggleViewMode}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            {viewMode === "grid" ? "Table View" : "Grid View"}
+          </button>
+        )} */}
+            </div>
+            <div className="overflow-auto max-h-[calc(100%-4rem)]">
+                {type === "costream" ? (
+                    <CoStreamView
+                        data={snapshot}
+                        onNavigate={onNavigate}
+                        node={node}
+                        value={value as RawCoStream}
+                    />
+                ) : viewMode === "grid" ? (
+                    <GridView
+                        data={snapshot}
+                        onNavigate={onNavigate}
+                        node={node}
+                    />
+                ) : (
+                    <TableView
+                        data={snapshot}
+                        node={node}
+                        onNavigate={onNavigate}
+                    />
+                )}
+                {/* --- */}
+                {extendedType !== "account" && extendedType !== "group" && (
+                    <div className="text-xs text-gray-500 mt-4">
+                        Owned by{" "}
+                        <AccountOrGroupPreview
+                            coId={value.group.id}
+                            node={node}
+                            showId
+                            onClick={() => {
+                                onNavigate([
+                                    { coId: value.group.id, name: "owner" },
+                                ]);
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

examples/inspector/src/viewer/table-viewer.tsx

@@ -0,0 +1,142 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import { JsonObject } from "cojson/src/jsonValue";
+import { PageInfo } from "./types";
+import { useMemo, useState } from "react";
+import { ValueRenderer } from "./value-renderer";
+import { LinkIcon } from "../link-icon";
+import { useResolvedCoValues } from "./use-resolve-covalue";
+
+export function TableView({
+    data,
+    node,
+    onNavigate,
+}: {
+    data: JsonObject;
+    node: LocalNode;
+    onNavigate: (pages: PageInfo[]) => void;
+}) {
+    const [visibleRowsCount, setVisibleRowsCount] = useState(10);
+    const [coIdArray, visibleRows] = useMemo(() => {
+        const coIdArray = Array.isArray(data)
+            ? data
+            : Object.values(data).every(
+                    (k) => typeof k === "string" && k.startsWith("co_"),
+                )
+              ? Object.values(data).map((k) => k as CoID<RawCoValue>)
+              : [];
+
+        const visibleRows = coIdArray.slice(0, visibleRowsCount);
+
+        return [coIdArray, visibleRows];
+    }, [data, visibleRowsCount]);
+    const resolvedRows = useResolvedCoValues(visibleRows, node);
+
+    const hasMore = visibleRowsCount < coIdArray.length;
+
+    if (!coIdArray.length) {
+        return <div>No data to display</div>;
+    }
+
+    if (resolvedRows.length === 0) {
+        return <div>Loading...</div>;
+    }
+
+    const keys = Array.from(
+        new Set(
+            resolvedRows.flatMap((item) => Object.keys(item.snapshot || {})),
+        ),
+    );
+
+    const loadMore = () => {
+        setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
+    };
+
+    return (
+        <div>
+            <table className="min-w-full divide-y divide-gray-200">
+                <thead className="sticky top-0 border-b">
+                    <tr>
+                        {["", ...keys].map((key) => (
+                            <th
+                                key={key}
+                                className="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 rounded"
+                            >
+                                {key}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                    {resolvedRows
+                        .slice(0, visibleRowsCount)
+                        .map((item, index) => (
+                            <tr key={index}>
+                                <td className="px-1 py-0">
+                                    <button
+                                        onClick={() =>
+                                            onNavigate([
+                                                {
+                                                    coId: item.value!.id,
+                                                    name: index.toString(),
+                                                },
+                                            ])
+                                        }
+                                        className="px-4 py-4 whitespace-nowrap text-sm text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded"
+                                    >
+                                        <LinkIcon />
+                                    </button>
+                                </td>
+                                {keys.map((key) => (
+                                    <td
+                                        key={key}
+                                        className="px-4 py-4 whitespace-nowrap text-sm text-gray-500"
+                                    >
+                                        <ValueRenderer
+                                            json={
+                                                (item.snapshot as JsonObject)[
+                                                    key
+                                                ]
+                                            }
+                                            onCoIDClick={(coId) => {
+                                                async function handleClick() {
+                                                    onNavigate([
+                                                        {
+                                                            coId: item.value!
+                                                                .id,
+                                                            name: index.toString(),
+                                                        },
+                                                        {
+                                                            coId: coId,
+                                                            name: key,
+                                                        },
+                                                    ]);
+                                                }
+
+                                                handleClick();
+                                            }}
+                                        />
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                </tbody>
+            </table>
+            <div className="py-4 text-gray-500 flex items-center justify-between gap-2">
+                <span>
+                    Showing {Math.min(visibleRowsCount, coIdArray.length)} of{" "}
+                    {coIdArray.length}
+                </span>
+                {hasMore && (
+                    <div className="text-center">
+                        <button
+                            onClick={loadMore}
+                            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                        >
+                            Load More
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

examples/inspector/src/viewer/type-icon.tsx

@@ -0,0 +1,47 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import {
+    CoJsonType,
+    ExtendedCoJsonType,
+    useResolvedCoValue,
+} from "./use-resolve-covalue";
+
+export const TypeIcon = ({
+    type,
+    extendedType,
+}: {
+    type: CoJsonType;
+    extendedType?: ExtendedCoJsonType;
+}) => {
+    const iconMap: Record<ExtendedCoJsonType | CoJsonType, string> = {
+        record: "{} Record",
+        image: "🖼️ Image",
+        comap: "{} CoMap",
+        costream: "≋ CoStream",
+        colist: "☰ CoList",
+        account: "👤 Account",
+        group: "👥 Group",
+    };
+
+    const iconKey = extendedType || type;
+    const icon = iconMap[iconKey as keyof typeof iconMap];
+
+    return icon ? <span className="font-mono">{icon}</span> : null;
+};
+
+export const ResolveIcon = ({
+    coId,
+    node,
+}: {
+    coId: CoID<RawCoValue>;
+    node: LocalNode;
+}) => {
+    const { type, extendedType, snapshot } = useResolvedCoValue(coId, node);
+
+    if (snapshot === "unavailable" && !type) {
+        return <div className="text-gray-600 font-medium">Unavailable</div>;
+    }
+
+    if (!type) return <div className="whitespace-pre w-14 font-mono"> </div>;
+
+    return <TypeIcon type={type} extendedType={extendedType} />;
+};

examples/inspector/src/viewer/types.ts

@@ -0,0 +1,9 @@
+import { CoID, RawCoValue } from "cojson";
+
+export type PageInfo = {
+    coId: CoID<RawCoValue>;
+    name?: string;
+};
+
+export const isCoId = (coId: unknown): coId is CoID<RawCoValue> =>
+    typeof coId === "string" && coId.startsWith("co_");

examples/inspector/src/viewer/use-page-path.ts

@@ -0,0 +1,107 @@
+import { useState, useEffect, useCallback } from "react";
+import { PageInfo } from "./types";
+import { CoID, RawCoValue } from "cojson";
+
+export function usePagePath(defaultPath?: PageInfo[]) {
+    const [path, setPath] = useState<PageInfo[]>(() => {
+        const hash = window.location.hash.slice(2); // Remove '#/'
+        if (hash) {
+            try {
+                return decodePathFromHash(hash);
+            } catch (e) {
+                console.error("Failed to parse hash:", e);
+            }
+        }
+        return defaultPath || [];
+    });
+
+    const updatePath = useCallback((newPath: PageInfo[]) => {
+        setPath(newPath);
+        const hash = encodePathToHash(newPath);
+        window.location.hash = `#/${hash}`;
+    }, []);
+
+    useEffect(() => {
+        const handleHashChange = () => {
+            const hash = window.location.hash.slice(2);
+            if (hash) {
+                try {
+                    const newPath = decodePathFromHash(hash);
+                    setPath(newPath);
+                } catch (e) {
+                    console.error("Failed to parse hash:", e);
+                }
+            } else if (defaultPath) {
+                setPath(defaultPath);
+            }
+        };
+
+        window.addEventListener("hashchange", handleHashChange);
+        return () => window.removeEventListener("hashchange", handleHashChange);
+    }, [defaultPath]);
+
+    useEffect(() => {
+        if (
+            defaultPath &&
+            JSON.stringify(path) !== JSON.stringify(defaultPath)
+        ) {
+            updatePath(defaultPath);
+        }
+    }, [defaultPath, path, updatePath]);
+
+    const addPages = useCallback(
+        (newPages: PageInfo[]) => {
+            updatePath([...path, ...newPages]);
+        },
+        [path, updatePath],
+    );
+
+    const goToIndex = useCallback(
+        (index: number) => {
+            updatePath(path.slice(0, index + 1));
+        },
+        [path, updatePath],
+    );
+
+    const setPage = useCallback(
+        (coId: CoID<RawCoValue>) => {
+            updatePath([{ coId, name: "Root" }]);
+        },
+        [updatePath],
+    );
+
+    const goBack = useCallback(() => {
+        if (path.length > 1) {
+            updatePath(path.slice(0, path.length - 1));
+        }
+    }, [path, updatePath]);
+
+    return {
+        path,
+        setPage,
+        addPages,
+        goToIndex,
+        goBack,
+    };
+}
+
+function encodePathToHash(path: PageInfo[]): string {
+    return path
+        .map((page) => {
+            if (page.name && page.name !== "Root") {
+                return `${page.coId}:${encodeURIComponent(page.name)}`;
+            }
+            return page.coId;
+        })
+        .join("/");
+}
+
+function decodePathFromHash(hash: string): PageInfo[] {
+    return hash.split("/").map((segment) => {
+        const [coId, encodedName] = segment.split(":");
+        return {
+            coId,
+            name: encodedName ? decodeURIComponent(encodedName) : undefined,
+        } as PageInfo;
+    });
+}

examples/inspector/src/viewer/use-resolve-covalue.ts

@@ -0,0 +1,152 @@
+import { CoID, LocalNode, RawBinaryCoStream, RawCoValue } from "cojson";
+import { useEffect, useState } from "react";
+
+export type CoJsonType = "comap" | "costream" | "colist";
+export type ExtendedCoJsonType = "image" | "record" | "account" | "group";
+
+type JSON = string | number | boolean | null | JSON[] | { [key: string]: JSON };
+type JSONObject = { [key: string]: JSON };
+
+type ResolvedImageDefinition = {
+    originalSize: [number, number];
+    placeholderDataURL?: string;
+    [res: `${number}x${number}`]: RawBinaryCoStream["id"];
+};
+
+// Type guard for browser image
+export const isBrowserImage = (
+    coValue: JSONObject,
+): coValue is ResolvedImageDefinition => {
+    return "originalSize" in coValue && "placeholderDataURL" in coValue;
+};
+
+export type ResolvedGroup = {
+    readKey: string;
+    [key: string]: JSON;
+};
+
+export const isGroup = (coValue: JSONObject): coValue is ResolvedGroup => {
+    return "readKey" in coValue;
+};
+
+export type ResolvedAccount = {
+    profile: {
+        name: string;
+    };
+    [key: string]: JSON;
+};
+
+export const isAccount = (coValue: JSONObject): coValue is ResolvedAccount => {
+    return isGroup(coValue) && "profile" in coValue;
+};
+
+export async function resolveCoValue(
+    coValueId: CoID<RawCoValue>,
+    node: LocalNode,
+): Promise<
+    | {
+          value: RawCoValue;
+          snapshot: JSONObject;
+          type: CoJsonType | null;
+          extendedType: ExtendedCoJsonType | undefined;
+      }
+    | {
+          value: undefined;
+          snapshot: "unavailable";
+          type: null;
+          extendedType: undefined;
+      }
+> {
+    const value = await node.load(coValueId);
+
+    if (value === "unavailable") {
+        return {
+            value: undefined,
+            snapshot: "unavailable",
+            type: null,
+            extendedType: undefined,
+        };
+    }
+
+    const snapshot = value.toJSON() as JSONObject;
+    const type = value.type as CoJsonType;
+
+    // Determine extended type
+    let extendedType: ExtendedCoJsonType | undefined;
+
+    if (type === "comap") {
+        if (isBrowserImage(snapshot)) {
+            extendedType = "image";
+        } else if (isAccount(snapshot)) {
+            extendedType = "account";
+        } else if (isGroup(snapshot)) {
+            extendedType = "group";
+        } else {
+            // This check is a bit of a hack
+            // There might be a better way to do this
+            const children = Object.values(snapshot).slice(0, 10);
+            if (
+                children.every(
+                    (c) => typeof c === "string" && c.startsWith("co_"),
+                ) &&
+                children.length > 3
+            ) {
+                extendedType = "record";
+            }
+        }
+    }
+
+    return {
+        value,
+        snapshot,
+        type,
+        extendedType,
+    };
+}
+
+export function useResolvedCoValue(
+    coValueId: CoID<RawCoValue>,
+    node: LocalNode,
+) {
+    const [result, setResult] =
+        useState<Awaited<ReturnType<typeof resolveCoValue>>>();
+
+    useEffect(() => {
+        resolveCoValue(coValueId, node).then(setResult);
+    }, [coValueId, node]);
+
+    return (
+        result || {
+            value: undefined,
+            snapshot: undefined,
+            type: undefined,
+            extendedType: undefined,
+        }
+    );
+}
+
+export function useResolvedCoValues(
+    coValueIds: CoID<RawCoValue>[],
+    node: LocalNode,
+) {
+    const [results, setResults] = useState<
+        Awaited<ReturnType<typeof resolveCoValue>>[]
+    >([]);
+
+    useEffect(() => {
+        console.log("RETECHING", coValueIds);
+        const fetchResults = async () => {
+            if (coValueIds.length === 0) return;
+            const resolvedValues = await Promise.all(
+                coValueIds.map((coValueId) => resolveCoValue(coValueId, node)),
+            );
+
+            console.log({ resolvedValues });
+            setResults(resolvedValues);
+        };
+
+        fetchResults();
+    }, [coValueIds, node]);
+
+    return results;
+}

examples/inspector/src/viewer/value-renderer.tsx

@@ -0,0 +1,248 @@
+import clsx from "clsx";
+import { CoID, JsonValue, LocalNode, RawCoValue } from "cojson";
+import { LinkIcon } from "../link-icon";
+import {
+    isBrowserImage,
+    resolveCoValue,
+    useResolvedCoValue,
+} from "./use-resolve-covalue";
+import React, { useEffect, useState } from "react";
+
+// Is there a chance we can pass the actual CoValue here?
+export function ValueRenderer({
+    json,
+    compact,
+    onCoIDClick,
+}: {
+    json: JsonValue | undefined;
+    compact?: boolean;
+    onCoIDClick?: (childNode: CoID<RawCoValue>) => void;
+}) {
+    if (typeof json === "undefined" || json === undefined) {
+        return <span className="text-gray-400">undefined</span>;
+    }
+
+    if (json === null) {
+        return <span className="text-gray-400">null</span>;
+    }
+
+    if (typeof json === "string" && json.startsWith("co_")) {
+        return (
+            <span
+                className={clsx(
+                    "inline-flex gap-1 items-center",
+                    onCoIDClick &&
+                        "text-blue-500 cursor-pointer hover:underline",
+                )}
+                onClick={() => {
+                    onCoIDClick?.(json as CoID<RawCoValue>);
+                }}
+            >
+                {json}
+                {onCoIDClick && <LinkIcon />}
+            </span>
+        );
+    }
+
+    if (typeof json === "string") {
+        return (
+            <span className="text-green-900 font-mono">
+                {/* <span className="select-none opacity-70">{'"'}</span> */}
+                {json}
+                {/* <span className="select-none opacity-70">{'"'}</span> */}
+            </span>
+        );
+    }
+
+    if (typeof json === "number") {
+        return <span className="text-purple-500">{json}</span>;
+    }
+
+    if (typeof json === "boolean") {
+        return (
+            <span
+                className={clsx(
+                    json
+                        ? "text-green-700 bg-green-700/5"
+                        : "text-amber-700 bg-amber-500/5",
+                    "font-mono",
+                    "inline-block px-1 py-0.5 rounded",
+                )}
+            >
+                {json.toString()}
+            </span>
+        );
+    }
+
+    if (Array.isArray(json)) {
+        return (
+            <span title={JSON.stringify(json)}>
+                Array <span className="text-gray-500">({json.length})</span>
+            </span>
+        );
+    }
+
+    if (typeof json === "object") {
+        return (
+            <span
+                title={JSON.stringify(json, null, 2)}
+                className="inline-block max-w-64 truncate"
+            >
+                {compact ? (
+                    <span>
+                        Object{" "}
+                        <span className="text-gray-500">
+                            ({Object.keys(json).length})
+                        </span>
+                    </span>
+                ) : (
+                    JSON.stringify(json, null, 2)
+                )}
+            </span>
+        );
+    }
+
+    return <span>{String(json)}</span>;
+}
+
+export const CoMapPreview = ({
+    coId,
+    node,
+    limit = 6,
+}: {
+    coId: CoID<RawCoValue>;
+    node: LocalNode;
+    limit?: number;
+}) => {
+    const { value, snapshot, type, extendedType } = useResolvedCoValue(
+        coId,
+        node,
+    );
+
+    if (!snapshot) {
+        return (
+            <div className="rounded bg-gray-100 animate-pulse whitespace-pre w-24">
+                {" "}
+            </div>
+        );
+    }
+
+    if (snapshot === "unavailable" && !value) {
+        return <div className="text-gray-500">Unavailable</div>;
+    }
+
+    if (extendedType === "image" && isBrowserImage(snapshot)) {
+        return (
+            <div>
+                <img
+                    src={snapshot.placeholderDataURL}
+                    className="size-8 border-2 border-white drop-shadow-md my-2"
+                />
+                <span className="text-gray-500 text-sm">
+                    {snapshot.originalSize[0]} x {snapshot.originalSize[1]}
+                </span>
+
+                {/* <CoMapPreview coId={value[]} node={node} /> */}
+                {/* <ProgressiveImg image={value}>
+                    {({ src }) => <img src={src} className={clsx("w-full")} />}
+                </ProgressiveImg> */}
+            </div>
+        );
+    }
+
+    if (extendedType === "record") {
+        return (
+            <div>
+                Record{" "}
+                <span className="text-gray-500">
+                    ({Object.keys(snapshot).length})
+                </span>
+            </div>
+        );
+    }
+
+    if (type === "colist") {
+        return (
+            <div>
+                List{" "}
+                <span className="text-gray-500">
+                    ({(snapshot as unknown as []).length})
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="text-sm flex flex-col gap-2 items-start">
+            <div className="grid grid-cols-[auto_1fr] gap-2">
+                {Object.entries(snapshot)
+                    .slice(0, limit)
+                    .map(([key, value]) => (
+                        <React.Fragment key={key}>
+                            <span className="font-medium">{key}: </span>
+                            <span>
+                                <ValueRenderer json={value} />
+                            </span>
+                        </React.Fragment>
+                    ))}
+            </div>
+            {Object.entries(snapshot).length > limit && (
+                <div className="text-left text-xs text-gray-500 mt-2">
+                    {Object.entries(snapshot).length - limit} more
+                </div>
+            )}
+        </div>
+    );
+};
+
+export function AccountOrGroupPreview({
+    coId,
+    node,
+    showId = false,
+    onClick,
+}: {
+    coId: CoID<RawCoValue>;
+    node: LocalNode;
+    showId?: boolean;
+    onClick?: (name?: string) => void;
+}) {
+    const { snapshot, extendedType } = useResolvedCoValue(coId, node);
+    const [name, setName] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (extendedType === "account") {
+            resolveCoValue(
+                (snapshot as unknown as { profile: CoID<RawCoValue> }).profile,
+                node,
+            ).then(({ snapshot }) => {
+                if (
+                    typeof snapshot === "object" &&
+                    "name" in snapshot &&
+                    typeof snapshot.name === "string"
+                ) {
+                    setName(snapshot.name);
+                }
+            });
+        }
+    }, [snapshot, node, extendedType]);
+
+    if (!snapshot) return <span>Loading...</span>;
+    if (extendedType !== "account" && extendedType !== "group") {
+        return <span>CoID is not an account or group</span>;
+    }
+
+    const displayName =
+        extendedType === "account" ? name || "Account" : "Group";
+    const displayText = showId ? `${displayName} (${coId})` : displayName;
+
+    const props = onClick
+        ? {
+              onClick: () => onClick(displayName),
+              className: "text-blue-500 cursor-pointer hover:underline",
+          }
+        : {
+              className: "text-gray-500",
+          };
+
+    return <span {...props}>{displayText}</span>;
+}

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.66",
+  "version": "0.0.100-unique.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/pets/src/1_schema.ts

@@ -43,7 +43,7 @@ export class PetAccount extends Account {
     profile = co.ref(Profile);
     root = co.ref(PetAccountRoot);
 
-    migrate(creationProps?: { name: string }) {
+    migrate(this: PetAccount, creationProps?: { name: string }) {
         super.migrate(creationProps);
         if (!this._refs.root) {
             this.root = PetAccountRoot.create(
@@ -52,7 +52,6 @@ export class PetAccount extends Account {
                 },
                 { owner: this },
             );
-            console.log("Created root", this.root);
         }
     }
 }

examples/pets/src/2_main.tsx

@@ -3,14 +3,13 @@ import ReactDOM from "react-dom/client";
 import { Link, RouterProvider, createHashRouter } from "react-router-dom";
 import "./index.css";
 
-import { createJazzReactContext, PasskeyAuth } from "jazz-react";
+import { createJazzReactApp, PasskeyAuth, usePasskeyAuth } from "jazz-react";
 
 import {
     Button,
     ThemeProvider,
     TitleAndLogo,
 } from "./basicComponents/index.ts";
-import { PrettyAuthUI } from "./components/Auth.tsx";
 import { NewPetPostForm } from "./3_NewPetPostForm.tsx";
 import { RatePetPostUI } from "./4_RatePetPostUI.tsx";
 import { PetAccount, PetPost } from "./1_schema.ts";
@@ -24,16 +23,7 @@ import { PetAccount, PetPost } from "./1_schema.ts";
 
 const appName = "Jazz Rate My Pet Example";
 
-const auth = PasskeyAuth<PetAccount>({
-    appName,
-    Component: PrettyAuthUI,
-    accountSchema: PetAccount,
-});
-
-const Jazz = createJazzReactContext({
-    auth,
-    peer: "wss://mesh.jazz.tools/?key=you@example.com",
-});
+const Jazz = createJazzReactApp({ AccountSchema: PetAccount });
 // eslint-disable-next-line react-refresh/only-export-components
 export const { useAccount, useCoState, useAcceptInvite } = Jazz;
 
@@ -42,9 +32,12 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
         <ThemeProvider>
             <TitleAndLogo name={appName} />
             <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-                <Jazz.Provider>
-                    <App />
-                </Jazz.Provider>
+                <PasskeyAuth appName={appName}>
+                    <Jazz.Provider peer="wss://mesh.jazz.tools/?key=pets-example-jazz@gcmp.io">
+                        <App />
+                    </Jazz.Provider>
+                    <PasskeyAuth.BasicUI />
+                </PasskeyAuth>
             </div>
         </ThemeProvider>
     </React.StrictMode>,
@@ -58,7 +51,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
  */
 
 export default function App() {
-    const { logOut } = useAccount();
+    const {state: passKeyState} = usePasskeyAuth();
 
     const router = createHashRouter([
         {
@@ -88,12 +81,16 @@ export default function App() {
         <>
             <RouterProvider router={router} />
 
-            <Button
-                onClick={() => router.navigate("/").then(logOut)}
-                variant="outline"
-            >
-                Log Out
-            </Button>
+            {passKeyState.state === "signedIn" && (
+                <Button
+                    onClick={() =>
+                        router.navigate("/").then(passKeyState.logOut)
+                    }
+                    variant="outline"
+                >
+                    Log Out
+                </Button>
+            )}
         </>
     );
 }
@@ -101,7 +98,7 @@ export default function App() {
 export function PostOverview() {
     const { me } = useAccount();
 
-    const myPosts = me.root?.posts;
+    const myPosts = me?.root?.posts;
 
     return (
         <>

examples/pets/src/3_NewPetPostForm.tsx

@@ -29,6 +29,7 @@ export function NewPetPostForm() {
 
     const onChangeName = useCallback(
         (name: string) => {
+            if (!me) return;
             if (newPetPost) {
                 newPetPost.name = name;
             } else {
@@ -61,7 +62,7 @@ export function NewPetPostForm() {
     );
 
     const onSubmit = useCallback(() => {
-        if (!newPetPost) return;
+        if (!me || !newPetPost) return;
         const myPosts = me.root?.posts;
 
         if (!myPosts) {
@@ -71,7 +72,7 @@ export function NewPetPostForm() {
         myPosts.push(newPetPost as PetPost);
 
         navigate("/pet/" + newPetPost.id);
-    }, [me.root?.posts, newPetPost, navigate]);
+    }, [me?.root?.posts, newPetPost, navigate]);
 
     return (
         <div className="flex flex-col gap-10">

examples/pets/src/components/Auth.tsx

@@ -1,48 +0,0 @@
-import { useState } from "react";
-
-import { PasskeyAuth } from "jazz-react";
-
-import { Input, Button } from "../basicComponents";
-
-export const PrettyAuthUI: PasskeyAuth.Component = ({
-    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/todo/CHANGELOG.md

@@ -1,424 +1,778 @@
 # jazz-example-todo
 
+## 0.0.99-unique.2
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.35-unique.2
+    -   jazz-react@0.7.35-unique.2
+
+## 0.0.99-new-auth.1
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.35-new-auth.1
+
+## 0.0.99-new-auth.0
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.35-new-auth.0
+    -   jazz-tools@0.7.35-new-auth.0
+
+## 0.0.98
+
+### Patch Changes
+
+-   jazz-react@0.7.34
+-   jazz-tools@0.7.34
+
+## 0.0.98-neverthrow.6
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.8
+-   jazz-tools@0.7.34-neverthrow.8
+
+## 0.0.98-neverthrow.5
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.7
+-   jazz-tools@0.7.34-neverthrow.7
+
+## 0.0.98-neverthrow.4
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.4
+-   jazz-tools@0.7.34-neverthrow.4
+
+## 0.0.98-neverthrow.3
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.3
+-   jazz-tools@0.7.34-neverthrow.3
+
+## 0.0.98-neverthrow.2
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.2
+
+## 0.0.98-neverthrow.1
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.1
+-   jazz-tools@0.7.34-neverthrow.1
+
+## 0.0.98-neverthrow.0
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.0
+-   jazz-tools@0.7.34-neverthrow.0
+
+## 0.0.97
+
+### Patch Changes
+
+-   jazz-react@0.7.33
+-   jazz-tools@0.7.33
+
+## 0.0.97-hotfixes.5
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.5
+-   jazz-tools@0.7.33-hotfixes.5
+
+## 0.0.97-hotfixes.4
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.4
+-   jazz-tools@0.7.33-hotfixes.4
+
+## 0.0.97-hotfixes.3
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.3
+-   jazz-tools@0.7.33-hotfixes.3
+
+## 0.0.97-hotfixes.2
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.2
+
+## 0.0.97-hotfixes.1
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.1
+
+## 0.0.97-hotfixes.0
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.0
+-   jazz-tools@0.7.33-hotfixes.0
+
+## 0.0.96
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.32
+    -   jazz-react@0.7.32
+
+## 0.0.95
+
+### Patch Changes
+
+-   jazz-react@0.7.31
+-   jazz-tools@0.7.31
+
+## 0.0.94
+
+### Patch Changes
+
+-   jazz-react@0.7.30
+
+## 0.0.93
+
+### Patch Changes
+
+-   jazz-react@0.7.29
+-   jazz-tools@0.7.29
+
+## 0.0.92
+
+### Patch Changes
+
+-   jazz-react@0.7.28
+-   jazz-tools@0.7.28
+
+## 0.0.91
+
+### Patch Changes
+
+-   jazz-react@0.7.27
+
+## 0.0.90
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.26
+    -   jazz-tools@0.7.26
+
+## 0.0.89
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.25
+    -   jazz-react@0.7.25
+
+## 0.0.88
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.24
+    -   jazz-react@0.7.24
+
+## 0.0.87
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.23
+    -   jazz-tools@0.7.23
+
+## 0.0.86
+
+### Patch Changes
+
+-   jazz-react@0.7.22
+
+## 0.0.85
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.21
+    -   jazz-react@0.7.21
+
+## 0.0.84
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.20
+    -   jazz-react@0.7.20
+
+## 0.0.83
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.19
+    -   jazz-react@0.7.19
+
+## 0.0.82
+
+### Patch Changes
+
+-   jazz-react@0.7.18
+-   jazz-tools@0.7.18
+
+## 0.0.81
+
+### Patch Changes
+
+-   jazz-react@0.7.17
+-   jazz-tools@0.7.17
+
+## 0.0.80
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.16
+    -   jazz-react@0.7.16
+
+## 0.0.79
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.15
+
+## 0.0.78
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.14
+    -   jazz-react@0.7.14
+
+## 0.0.77
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.13
+    -   jazz-react@0.7.13
+
+## 0.0.76
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.12
+    -   jazz-react@0.7.12
+
+## 0.0.75
+
+### Patch Changes
+
+-   jazz-react@0.7.11
+-   jazz-tools@0.7.11
+
+## 0.0.74
+
+### Patch Changes
+
+-   jazz-react@0.7.10
+-   jazz-tools@0.7.10
+
+## 0.0.73
+
+### Patch Changes
+
+-   jazz-react@0.7.9
+-   jazz-tools@0.7.9
+
+## 0.0.72
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.8
+    -   jazz-react@0.7.8
+
+## 0.0.71
+
+### Patch Changes
+
+-   Updated dependencies [9fdc91c]
+    -   jazz-react@0.7.7
+
+## 0.0.70
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.6
+    -   jazz-react@0.7.6
+
+## 0.0.69
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.5
+
+## 0.0.68
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.4
+
+## 0.0.67
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.3
+    -   jazz-react@0.7.3
+
+## 0.0.66
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.2
+
 ## 0.0.65
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.1
-  - jazz-react@0.7.1
+-   Updated dependencies
+    -   jazz-tools@0.7.1
+    -   jazz-react@0.7.1
 
 ## 0.0.64
 
 ### Patch Changes
 
-- Updated dependencies [8636319]
-- Updated dependencies [8636319]
-- Updated dependencies [1a35307]
-- Updated dependencies [96c494f]
-- Updated dependencies [59c18c3]
-- Updated dependencies [19f52b7]
-- Updated dependencies [8636319]
-- Updated dependencies [1a35307]
-- Updated dependencies [d8fe2b1]
-- Updated dependencies [19004b4]
-- Updated dependencies [a78f168]
-- Updated dependencies [52675c9]
-- Updated dependencies [129e2c1]
-- Updated dependencies [6d49e9b]
-- Updated dependencies [1cfa279]
-- Updated dependencies [704af7d]
-- Updated dependencies [e97f730]
-- Updated dependencies [460478f]
-- Updated dependencies [6b0418f]
-- Updated dependencies [e299c3e]
-- Updated dependencies [ed5643a]
-- Updated dependencies [bde684f]
-- Updated dependencies [c4151fc]
-- Updated dependencies [63374cc]
-- Updated dependencies [01ac646]
-- Updated dependencies [a5e68a4]
-- Updated dependencies [8636319]
-- Updated dependencies [952982e]
-- Updated dependencies [1a35307]
-- Updated dependencies [5fa277c]
-- Updated dependencies [60d5ca2]
-- Updated dependencies [21771c4]
-- Updated dependencies [77c2b56]
-- Updated dependencies [63374cc]
-- Updated dependencies [d2e03ff]
-- Updated dependencies [354bdcd]
-- Updated dependencies [ece35b3]
-- Updated dependencies [60d5ca2]
-- Updated dependencies [69ac514]
-- Updated dependencies [f8a5c46]
-- Updated dependencies [f0f6f1b]
-- Updated dependencies [e5eed5b]
-- Updated dependencies [1a44f87]
-- Updated dependencies [627d895]
-- Updated dependencies [1200aae]
-- Updated dependencies [63374cc]
-- Updated dependencies [ece35b3]
-- Updated dependencies [38d4410]
-- Updated dependencies [85d2b62]
-- Updated dependencies [fd86c11]
-- Updated dependencies [52675c9]
-  - jazz-tools@0.7.0
-  - jazz-react@0.7.0
+-   Updated dependencies [8636319]
+-   Updated dependencies [8636319]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [96c494f]
+-   Updated dependencies [59c18c3]
+-   Updated dependencies [19f52b7]
+-   Updated dependencies [8636319]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [d8fe2b1]
+-   Updated dependencies [19004b4]
+-   Updated dependencies [a78f168]
+-   Updated dependencies [52675c9]
+-   Updated dependencies [129e2c1]
+-   Updated dependencies [6d49e9b]
+-   Updated dependencies [1cfa279]
+-   Updated dependencies [704af7d]
+-   Updated dependencies [e97f730]
+-   Updated dependencies [460478f]
+-   Updated dependencies [6b0418f]
+-   Updated dependencies [e299c3e]
+-   Updated dependencies [ed5643a]
+-   Updated dependencies [bde684f]
+-   Updated dependencies [c4151fc]
+-   Updated dependencies [63374cc]
+-   Updated dependencies [01ac646]
+-   Updated dependencies [a5e68a4]
+-   Updated dependencies [8636319]
+-   Updated dependencies [952982e]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [5fa277c]
+-   Updated dependencies [60d5ca2]
+-   Updated dependencies [21771c4]
+-   Updated dependencies [77c2b56]
+-   Updated dependencies [63374cc]
+-   Updated dependencies [d2e03ff]
+-   Updated dependencies [354bdcd]
+-   Updated dependencies [ece35b3]
+-   Updated dependencies [60d5ca2]
+-   Updated dependencies [69ac514]
+-   Updated dependencies [f8a5c46]
+-   Updated dependencies [f0f6f1b]
+-   Updated dependencies [e5eed5b]
+-   Updated dependencies [1a44f87]
+-   Updated dependencies [627d895]
+-   Updated dependencies [1200aae]
+-   Updated dependencies [63374cc]
+-   Updated dependencies [ece35b3]
+-   Updated dependencies [38d4410]
+-   Updated dependencies [85d2b62]
+-   Updated dependencies [fd86c11]
+-   Updated dependencies [52675c9]
+    -   jazz-tools@0.7.0
+    -   jazz-react@0.7.0
 
 ## 0.0.64-alpha.42
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.42
-  - jazz-react@0.7.0-alpha.42
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.42
+    -   jazz-react@0.7.0-alpha.42
 
 ## 0.0.64-alpha.41
 
 ### Patch Changes
 
-- jazz-tools@0.7.0-alpha.41
-- jazz-react@0.7.0-alpha.41
+-   jazz-tools@0.7.0-alpha.41
+-   jazz-react@0.7.0-alpha.41
 
 ## 0.0.64-alpha.40
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.40
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.40
 
 ## 0.0.64-alpha.39
 
 ### Patch Changes
 
-- jazz-react@0.7.0-alpha.39
-- jazz-tools@0.7.0-alpha.39
+-   jazz-react@0.7.0-alpha.39
+-   jazz-tools@0.7.0-alpha.39
 
 ## 0.0.64-alpha.38
 
 ### Patch Changes
 
-- Updated dependencies
-- Updated dependencies
-- Updated dependencies
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.38
-  - jazz-react@0.7.0-alpha.38
+-   Updated dependencies
+-   Updated dependencies
+-   Updated dependencies
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.38
+    -   jazz-react@0.7.0-alpha.38
 
 ## 0.0.64-alpha.37
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.37
-  - jazz-tools@0.7.0-alpha.37
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.37
+    -   jazz-tools@0.7.0-alpha.37
 
 ## 0.0.64-alpha.36
 
 ### Patch Changes
 
-- Updated dependencies [1a35307]
-- Updated dependencies [1a35307]
-- Updated dependencies [6b0418f]
-- Updated dependencies [1a35307]
-  - jazz-tools@0.7.0-alpha.36
-  - jazz-react@0.7.0-alpha.36
+-   Updated dependencies [1a35307]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [6b0418f]
+-   Updated dependencies [1a35307]
+    -   jazz-tools@0.7.0-alpha.36
+    -   jazz-react@0.7.0-alpha.36
 
 ## 0.0.64-alpha.35
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.35
-  - jazz-react@0.7.0-alpha.35
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.35
+    -   jazz-react@0.7.0-alpha.35
 
 ## 0.0.64-alpha.34
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.34
-  - jazz-react@0.7.0-alpha.34
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.34
+    -   jazz-react@0.7.0-alpha.34
 
 ## 0.0.64-alpha.33
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.33
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.33
 
 ## 0.0.64-alpha.32
 
 ### Patch Changes
 
-- Updated dependencies
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.32
-  - jazz-react@0.7.0-alpha.32
+-   Updated dependencies
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.32
+    -   jazz-react@0.7.0-alpha.32
 
 ## 0.0.64-alpha.31
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.31
-  - jazz-react@0.7.0-alpha.31
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.31
+    -   jazz-react@0.7.0-alpha.31
 
 ## 0.0.64-alpha.30
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.30
-  - jazz-react@0.7.0-alpha.30
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.30
+    -   jazz-react@0.7.0-alpha.30
 
 ## 0.0.64-alpha.29
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.29
-  - jazz-react@0.7.0-alpha.29
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.29
+    -   jazz-react@0.7.0-alpha.29
 
 ## 0.0.64-alpha.28
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.28
-  - jazz-react@0.7.0-alpha.28
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.28
+    -   jazz-react@0.7.0-alpha.28
 
 ## 0.0.64-alpha.27
 
 ### Patch Changes
 
-- Updated dependencies
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.27
-  - jazz-react@0.7.0-alpha.27
+-   Updated dependencies
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.27
+    -   jazz-react@0.7.0-alpha.27
 
 ## 0.0.64-alpha.26
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.26
-  - jazz-react@0.7.0-alpha.26
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.26
+    -   jazz-react@0.7.0-alpha.26
 
 ## 0.0.64-alpha.25
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.25
-  - jazz-react@0.7.0-alpha.25
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.25
+    -   jazz-react@0.7.0-alpha.25
 
 ## 0.0.64-alpha.24
 
 ### Patch Changes
 
-- Updated dependencies
-- Updated dependencies
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.24
-  - jazz-react@0.7.0-alpha.24
+-   Updated dependencies
+-   Updated dependencies
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.24
+    -   jazz-react@0.7.0-alpha.24
 
 ## 0.0.64-alpha.23
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.23
-  - jazz-react@0.7.0-alpha.23
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.23
+    -   jazz-react@0.7.0-alpha.23
 
 ## 0.0.64-alpha.22
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.22
-  - jazz-react@0.7.0-alpha.22
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.22
+    -   jazz-react@0.7.0-alpha.22
 
 ## 0.0.64-alpha.21
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.21
-  - jazz-tools@0.7.0-alpha.21
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.21
+    -   jazz-tools@0.7.0-alpha.21
 
 ## 0.0.64-alpha.20
 
 ### Patch Changes
 
-- Updated dependencies
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.20
-  - jazz-tools@0.7.0-alpha.20
+-   Updated dependencies
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.20
+    -   jazz-tools@0.7.0-alpha.20
 
 ## 0.0.64-alpha.19
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.19
-  - jazz-react@0.7.0-alpha.19
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.19
+    -   jazz-react@0.7.0-alpha.19
 
 ## 0.0.64-alpha.18
 
 ### Patch Changes
 
-- jazz-react@0.7.0-alpha.18
+-   jazz-react@0.7.0-alpha.18
 
 ## 0.0.64-alpha.17
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.17
-  - jazz-react@0.7.0-alpha.17
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.17
+    -   jazz-react@0.7.0-alpha.17
 
 ## 0.0.64-alpha.16
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.16
-  - jazz-react@0.7.0-alpha.16
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.16
+    -   jazz-react@0.7.0-alpha.16
 
 ## 0.0.64-alpha.15
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.15
-  - jazz-react@0.7.0-alpha.15
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.15
+    -   jazz-react@0.7.0-alpha.15
 
 ## 0.0.64-alpha.14
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.14
-  - jazz-react@0.7.0-alpha.14
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.14
+    -   jazz-react@0.7.0-alpha.14
 
 ## 0.0.64-alpha.13
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.13
-  - jazz-react@0.7.0-alpha.13
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.13
+    -   jazz-react@0.7.0-alpha.13
 
 ## 0.0.64-alpha.12
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.12
-  - jazz-tools@0.7.0-alpha.12
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.12
+    -   jazz-tools@0.7.0-alpha.12
 
 ## 0.0.64-alpha.11
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.11
-  - jazz-tools@0.7.0-alpha.11
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.11
+    -   jazz-tools@0.7.0-alpha.11
 
 ## 0.0.64-alpha.10
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.10
-  - jazz-tools@0.7.0-alpha.10
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.10
+    -   jazz-tools@0.7.0-alpha.10
 
 ## 0.0.64-alpha.9
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.9
-  - jazz-tools@0.7.0-alpha.9
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.9
+    -   jazz-tools@0.7.0-alpha.9
 
 ## 0.0.64-alpha.8
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.8
-  - jazz-tools@0.7.0-alpha.8
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.8
+    -   jazz-tools@0.7.0-alpha.8
 
 ## 0.0.64-alpha.7
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.7
-  - jazz-tools@0.7.0-alpha.7
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.7
+    -   jazz-tools@0.7.0-alpha.7
 
 ## 0.0.64-alpha.6
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.6
-  - jazz-tools@0.7.0-alpha.6
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.6
+    -   jazz-tools@0.7.0-alpha.6
 
 ## 0.0.64-alpha.5
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.5
-  - jazz-tools@0.7.0-alpha.5
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.5
+    -   jazz-tools@0.7.0-alpha.5
 
 ## 0.0.64-alpha.4
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.4
-  - jazz-react@0.7.0-alpha.4
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.4
+    -   jazz-react@0.7.0-alpha.4
 
 ## 0.0.64-alpha.3
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.7.0-alpha.3
-  - jazz-react@0.7.0-alpha.3
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.3
+    -   jazz-react@0.7.0-alpha.3
 
 ## 0.0.64-alpha.2
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.2
-  - jazz-tools@0.7.0-alpha.2
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.2
+    -   jazz-tools@0.7.0-alpha.2
 
 ## 0.0.64-alpha.1
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.1
-  - jazz-tools@0.7.0-alpha.1
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.1
+    -   jazz-tools@0.7.0-alpha.1
 
 ## 0.0.64-alpha.0
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.7.0-alpha.0
-  - cojson@0.7.0-alpha.0
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.0
+    -   cojson@0.7.0-alpha.0
 
 ## 0.0.63
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.5.0
-  - jazz-react-auth-local@0.4.16
+-   Updated dependencies
+    -   jazz-react@0.5.0
+    -   jazz-react-auth-local@0.4.16

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.65",
+  "version": "0.0.99-unique.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/todo/src/1_schema.ts

@@ -39,7 +39,7 @@ export class TodoAccount extends Account {
     /** 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.
      */
-    migrate(creationProps?: { name: string }) {
+    migrate(this: TodoAccount, creationProps?: { name: string }) {
         super.migrate(creationProps);
         if (!this._refs.root) {
             this.root = TodoAccountRoot.create(

examples/todo/src/2_main.tsx

@@ -6,14 +6,13 @@ import {
 } from "react-router-dom";
 import "./index.css";
 
-import { createJazzReactContext, PasskeyAuth } from "jazz-react";
+import { createJazzReactApp, PasskeyAuth, usePasskeyAuth } from "jazz-react";
 
 import {
     Button,
     ThemeProvider,
     TitleAndLogo,
 } from "./basicComponents/index.ts";
-import { PrettyAuthUI } from "./components/Auth.tsx";
 import { NewProjectForm } from "./3_NewProjectForm.tsx";
 import { ProjectTodoTable } from "./4_ProjectTodoTable.tsx";
 import { TodoAccount, TodoProject } from "./1_schema.ts";
@@ -31,14 +30,8 @@ import { TodoAccount, TodoProject } from "./1_schema.ts";
 
 const appName = "Jazz Todo List Example";
 
-const auth = PasskeyAuth<TodoAccount>({
-    appName,
-    Component: PrettyAuthUI,
-    accountSchema: TodoAccount,
-});
-const Jazz = createJazzReactContext<TodoAccount>({
-    auth,
-    peer: "wss://mesh.jazz.tools/?key=you@example.com",
+const Jazz = createJazzReactApp<TodoAccount>({
+    AccountSchema: TodoAccount,
 });
 // eslint-disable-next-line react-refresh/only-export-components
 export const { useAccount, useCoState, useAcceptInvite } = Jazz;
@@ -48,9 +41,12 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <ThemeProvider>
         <TitleAndLogo name={appName} />
         <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-            <Jazz.Provider>
-                <App />
-            </Jazz.Provider>
+            <PasskeyAuth appName={appName}>
+                <Jazz.Provider peer="wss://mesh.jazz.tools/?key=todo-example-jazz@gcmp.io">
+                    <App />
+                </Jazz.Provider>
+                <PasskeyAuth.BasicUI />
+            </PasskeyAuth>
         </div>
     </ThemeProvider>,
     // </React.StrictMode>
@@ -65,7 +61,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
  */
 export default function App() {
     // logOut logs out the AuthProvider passed to `<Jazz.Provider/>` above.
-    const { logOut } = useAccount();
+    const { state: passKeyState } = usePasskeyAuth();
 
     const router = createHashRouter([
         {
@@ -94,12 +90,16 @@ export default function App() {
         <>
             <RouterProvider router={router} />
 
-            <Button
-                onClick={() => router.navigate("/").then(logOut)}
-                variant="outline"
-            >
-                Log Out
-            </Button>
+            {passKeyState.state === "signedIn" && (
+                <Button
+                    onClick={() =>
+                        router.navigate("/").then(passKeyState.logOut)
+                    }
+                    variant="outline"
+                >
+                    Log Out
+                </Button>
+            )}
         </>
     );
 }

examples/todo/src/3_NewProjectForm.tsx

@@ -16,7 +16,7 @@ export function NewProjectForm() {
 
     const createProject = useCallback(
         (title: string) => {
-            if (!title) return;
+            if (!me || !title) return;
 
             // To create a new todo project, we first create a `Group`,
             // which is a scope for defining access rights (reader/writer/admin)

examples/todo/src/components/Auth.tsx

@@ -1,48 +0,0 @@
-import { useState } from "react";
-
-import { PasskeyAuth } from "jazz-react";
-
-import { Input, Button } from "../basicComponents";
-
-export const PrettyAuthUI: PasskeyAuth.Component = ({
-    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>
-    );
-};

homepage/homepage/app/docs/guide.mdx

@@ -1,17 +1,18 @@
 import { Slogan } from "@/components/forMdx";
 import { JazzLogo } from "@/components/logos";
 
-<h1 id="guide">Learn some Jazz.</h1>
-<Slogan>Build an issue tracking app with distributed state.</Slogan>
+<h1 id="guide">Learn some <JazzLogo className="h-[1.3em] relative -top-0.5 inline-block -ml-[0.1em] -mr-[0.1em]"/></h1>
+<Slogan>Build an issue tracker with distributed state.</Slogan>
 
 Our issues app will be quite simple, but it will have team collaboration. <span className="text-nowrap">**Let's call it... &ldquo;Circular.&rdquo;**</span>
 
 We'll build everything **step-by-step,** in typical, immediately usable stages. We'll explore many important things Jazz does &mdash; so **follow along** or **just pick things out.**
 
-<h2 id="setup">Project Setup</h2>
+<h2 id="guide-setup">Project Setup</h2>
 
-1. Create a project from a generic Vite starter template:
+1. Create a project called "circular" from a generic Vite starter template:
 
+    {/* prettier-ignore */}
     ```bash
     npx degit gardencmp/vite-ts-react-tailwind circular
     cd circular
@@ -29,33 +30,36 @@ We'll build everything **step-by-step,** in typical, immediately usable stages.
 
     <small>(in a new terminal window):</small>
 
+    {/* prettier-ignore */}
     ```bash
     cd circular
     npm install jazz-tools jazz-react
     ```
 
-3. Set up a Jazz context, by modifying `src/main.tsx`:
-
-    ```tsx subtle=1,2,3,4,13,15,16,17,19
-    import React from "react";
-    import ReactDOM from "react-dom/client";
-    import App from "./App.tsx";
-    import "./index.css";
-    import { JazzReact } from "jazz-react";
+3. Modify `src/main.tsx` to set up a Jazz context:
 
+    {/* prettier-ignore */}
+    ```tsx
+    import React from "react"; // old
+    import ReactDOM from "react-dom/client"; // old
+    import App from "./App.tsx"; // old
+    import "./index.css"; // old
+    import { createJazzReactContext, DemoAuth } from "jazz-react";
+     // old
     const Jazz = createJazzReactContext({
         auth: DemoAuth({ appName: "Circular" }),
-        peer: "wss://mesh.jazz.tools/?key=you@example.com", // <- put your email here to receive a proper API key for later
+        peer: "wss://mesh.jazz.tools/?key=you@example.com", // <- put your email here to get a proper API key later
     });
     export const { useAccount, useCoState } = Jazz;
-
-    ReactDOM.createRoot(document.getElementById("root")!).render(
+    // old
+    ReactDOM.createRoot(document.getElementById("root")!).render( // old
         <Jazz.Provider>
-            <React.StrictMode>
-                <App />
-            </React.StrictMode>
+            <React.StrictMode> // old
+                {" "}// old
+                <App /> // old
+            </React.StrictMode>{" "}// old
         </Jazz.Provider>,
-    );
+    ); // old
     ```
 
     This sets Jazz up, extracts app-specific hooks for later, and wraps our app in the provider.
@@ -75,7 +79,7 @@ We can
 -   **edit** CoValues, from anywhere, by mutating them like local state
 -   **subscribe to edits** in CoValues, whether they're local or remote
 
-<h3 id="first-schema">Declaring our own CoValues</h3>
+<h3 id="declaring-covalues">Declaring our own CoValues</h3>
 
 To make our own CoValues, we first need to declare a schema for them. Think of a schema as a combination of TypeScript types and runtime type information.
 
@@ -96,16 +100,17 @@ export class Issue extends CoMap {
 
 TODO: explain what's happening
 
-<h3>Reading from CoValues</h3>
+<h3 id="reading-covalues">Reading from CoValues</h3>
 
 CoValues are designed to be read like simple local JSON state. Let's see how we can read from an Issue by building a component to render one.
 
 Create a new file `src/components/Issue.tsx` and add the following:
 
+{/* prettier-ignore */}
 ```tsx
 import { Issue } from "../schema";
 
-export function IssueComponent({ issue }, { issue: Issue }) {
+export function IssueComponent({ issue }: { issue: Issue }) {
     return (
         <div className="grid grid-cols-6 text-sm border-r border-b [&>*]:p-2 [&>*]:border-l [&>*]:border-t">
             <h2>{issue.title}</h2>
@@ -119,42 +124,44 @@ export function IssueComponent({ issue }, { issue: Issue }) {
 
 Simple enough!
 
-<h3>Creating CoValues</h3>
+<h3 id="creating-covalues">Creating CoValues</h3>
 
 To actually see an Issue, we have to create one. This is where things start to get interesting...
 
 Let's modify `src/App.tsx` to prepare for creating an Issue and then rendering it:
 
-```tsx subtle=5,13,14,15
-import { useState, useCallback } from "react";
+{/* prettier-ignore */}
+```tsx
+import { useState } from "react";
 import { Issue } from "./schema";
-import { IssueComponent } from "./components/Issue";
-
-function App() {
+import { IssueComponent } from "./components/Issue.tsx";
+// old
+function App() {// old
     const [issue, setIssue] = useState<Issue>();
-
+    // old
     if (issue) {
         return <IssueComponent issue={issue} />;
     } else {
         return <button>Create Issue</button>;
     }
-}
-
-export default App;
+} // old
+// old
+export default App; // old
 ```
 
 Now, finally, let's implement creating an issue:
 
-```tsx subtle=1,2,3,5,6,8,23,24,25,27,28,29,30
-import { useState } from "react";
-import { Issue } from "./schema";
-import { IssueComponent } from "./components/Issue";
+{/* prettier-ignore */}
+```tsx
+import { useState } from "react"; // old
+import { Issue } from "./schema"; // old
+import { IssueComponent } from "./components/Issue.tsx"; // old
 import { useAccount } from "./main";
-
-function App() {
+// old
+function App() {// old
     const { me } = useAccount();
-    const [issue, setIssue] = useState<Issue>();
-
+    const [issue, setIssue] = useState<Issue>(); // old
+    // old
     const createIssue = () => {
         const newIssue = Issue.create(
             {
@@ -167,20 +174,20 @@ function App() {
         );
         setIssue(newIssue);
     };
-
-    if (issue) {
-        return <IssueComponent issue={issue} />;
-    } else {
+    // old
+    if (issue) {// old
+        return <IssueComponent issue={issue} />; // old
+    } else { // old
         return <button onClick={createIssue}>Create Issue</button>;
-    }
-}
-
-export default App;
+    } // old
+} // old
+// old
+export default App; // old
 ```
 
-Now you should be able to create a new issue by clicking the button and then see it rendered.
+🏁 Now you should be able to create a new issue by clicking the button and then see it rendered!
 
-<div className="text-xs uppercase text-stone-400 dark:text-stone-600 tracking-wider">
+<div className="text-xs uppercase text-stone-400 dark:text-stone-600 tracking-wider -mb-3">
     Preview
 </div>
 <div className="p-3 md:-mx-3 rounded border border-stone-100 dark:border-stone-900 bg-white dark:bg-black not-prose">
@@ -202,7 +209,7 @@ We'll already notice one interesting thing here:
 
 We'll make use of both of these facts in a bit, but for now let's start with local editing and subscribing.
 
-<h3>Editing CoValues and subscribing to edits</h3>
+<h3 id="editing-and-subscription">Editing CoValues and subscribing to edits</h3>
 
 Since we're the owner of the CoValue, we should be able to edit it, right?
 
@@ -216,49 +223,52 @@ This is exactly what the `useCoState` hook is for!
 
 Let's modify `src/App.tsx`:
 
-```tsx subtle=1,2,3,4,5,6,7,12,13,14,15,16,17,18,19,20,21,23,25,26,27,28,29,30,32
-import { useState } from "react";
-import { Issue } from "./schema";
-import { IssueComponent } from "./components/Issue";
-import { useAccount } from "./main";
-
-function App() {
-    const { me } = useAccount();
+{/* prettier-ignore */}
+```tsx
+import { useState } from "react"; // old
+import { Issue } from "./schema"; // old
+import { IssueComponent } from "./components/Issue.tsx"; // old
+import { useAccount, useCoState } from "./main";
+import { ID } from "jazz-tools"
+// old
+function App() { // old
+    const { me } = useAccount(); // old
     const [issueID, setIssueID] = useState<ID<Issue>>();
-
+    // old
     const issue = useCoState(Issue, issueID);
-
-    const createIssue = () => {
-        const newIssue = Issue.create(
-            {
-                title: "Buy terrarium",
-                description: "Make sure it's big enough for 10 snails.",
-                estimate: 5,
-                status: "backlog",
-            },
-            { owner: me },
-        );
+    // old
+    const createIssue = () => {// old
+        const newIssue = Issue.create(// old
+            { // old
+                title: "Buy terrarium", // old
+                description: "Make sure it's big enough for 10 snails.", // old
+                estimate: 5, // old
+                status: "backlog", // old
+            }, // old
+            { owner: me }, // old
+        ); // old
         setIssueID(newIssue.id);
-    };
-
-    if (issue) {
-        return <IssueComponent issue={issue} />;
-    } else {
-        return <button onClick={createIssue}>Create Issue</button>;
-    }
-}
-
-export default App;
+    }; // old
+    // old
+    if (issue) { // old
+        return <IssueComponent issue={issue} />; // old
+    } else { // old
+        return <button onClick={createIssue}>Create Issue</button>; // old
+    } // old
+} // old
+// old
+export default App; // old
 ```
 
 And now for the exciting part! Let's make `src/components/Issue.tsx` an editing component.
 
-```tsx subtle=1,3,4,5,28,29,30,31
-import { Issue } from "../schema";
-
-export function IssueComponent({ issue }, { issue: Issue }) {
-    return (
-        <div className="grid grid-cols-6 text-sm border-r border-b [&>*]:p-2 [&>*]:border-l [&>*]:border-t">
+{/* prettier-ignore */}
+```tsx
+import { Issue } from "../schema"; // old
+// old
+export function IssueComponent({ issue }: { issue: Issue }) { // old
+    return ( // old
+        <div className="grid grid-cols-6 text-sm border-r border-b [&>*]:p-2 [&>*]:border-l [&>*]:border-t"> // old
             <input type="text"
                 value={issue.title}
                 onChange={(event) => { issue.title = event.target.value }}/>
@@ -279,14 +289,14 @@ export function IssueComponent({ issue }, { issue: Issue }) {
             >
                 <option value="backlog">Backlog</option>
                 <option value="in progress">In Progress</option>
-                <option value="done">Done</options>
+                <option value="done">Done</option>
             </select>
-        </div>
-    );
-}
+        </div> // old
+    ); // old
+} // old
 ```
 
-<div className="text-xs uppercase text-stone-400 dark:text-stone-600 tracking-wider">
+<div className="text-xs uppercase text-stone-400 dark:text-stone-600 tracking-wider -mb-3">
     Preview
 </div>
 <div className="p-3 md:-mx-3 rounded border border-stone-100 dark:border-stone-900 bg-white dark:bg-black not-prose">
@@ -309,25 +319,31 @@ export function IssueComponent({ issue }, { issue: Issue }) {
     </div>
 </div>
 
+🏁 Now you should be able to edit the issue after creating it!
+
 You'll immediately notice that we're doing something non-idiomatic for React: we mutate the issue directly, by assigning to its properties.
 
-This works because CoValues intercept these edits, update their local view accordingly (React doesn't really care after rendering) and then notify subscribers of the change, who will receive a fresh, updated view of the CoValue.
+This works because CoValues
 
-<aside className="text-sm border rounded px-4 my-4 max-w-3xl [&_pre]:mx-0">
-    <h4 className="not-prose text-base py-2 mb-3 -mx-4 px-4 border-b">💡 A Quick Overview of Subscribing to CoValues</h4>
+-   intercept these edits
+-   update their local view accordingly (React doesn't really care after rendering)
+-   notify subscribers of the change (who will receive a fresh, updated view of the CoValue)
+
+<aside className="text-sm border border-stone-300 dark:border-stone-700 rounded px-4 my-4 max-w-3xl [&_pre]:mx-0">
+    <h4 className="not-prose text-base py-2 mb-3 -mx-4 px-4 border-b border-stone-300 dark:border-stone-700">💡 A Quick Overview of Subscribing to CoValues</h4>
 
     There are three main ways to subscribe to a CoValue:
 
     1.  Directly on an instance:
 
         ```ts
-        const unsub = issue.subscribe((updatedIssue) => console.log(updatedIssue));
+        const unsub = issue.subscribe([], (updatedIssue) => console.log(updatedIssue));
         ```
 
     2.  If you only have an ID (this will load the issue if needed):
 
         ```ts
-        const unsub = Issue.subscribe(issueID, { as: me }, (updatedIssue) => {
+        const unsub = Issue.subscribe(issueID, me, [], (updatedIssue) => {
             console.log(updatedIssue);
         });
         ```
@@ -344,7 +360,7 @@ This works because CoValues intercept these edits, update their local view accor
                 const { me } = useAccount();
                 const [value, setValue] = useState<V>();
 
-                useEffect(() => Schema.subscribe(id, { as: me }, setValue), [id]);
+                useEffect(() => Schema.subscribe(id, me, [], setValue), [id]);
 
                 return value;
             }
@@ -352,24 +368,303 @@ This works because CoValues intercept these edits, update their local view accor
 
 </aside>
 
-We have one subscriber on our Issue, with `useCoState` in `src/App.tsx`, which will cause the `App` component and its children to re-render whenever the Issue changes.
+We have one subscriber on our Issue, with `useCoState` in `src/App.tsx`, which will cause the `App` component and its children **to** re-render whenever the Issue changes.
 
-<h3>Automatic local & cloud persistence</h3>
+<h3 id="persistence">Automatic local & cloud persistence</h3>
 
 So far our Issue CoValues just looked like ephemeral local state. We'll now start exploring the first main feature that makes CoValues special: **automatic persistence.**
 
-<span className="text-amber-500">
-    🚧 OH NO - This is as far as we've written the Guide. 🚧
-</span>
-{" -> "}
-<a href="https://github.com/gardencmp/jazz/issues/186">Complain on GitHub</a>
+Actually, all the Issue CoValues we've created so far **have already been automatically persisted** to the cloud and locally - but we loose track of their ID after a reload.
 
-<h3>Remote sync</h3>
+So let's store the ID in window URL state and make sure our useState is in sync with that.
+
+{/* prettier-ignore */}
+```tsx
+import { useState } from "react"; // old
+import { Issue } from "./schema"; // old
+import { IssueComponent } from "./components/Issue.tsx"; // old
+import { useAccount, useCoState } from "./main"; // old
+import { ID } from "jazz-tools" // old
+// old
+function App() { // old
+    const { me } = useAccount(); // old
+    const [issueID, setIssueID] = useState<ID<Issue> | undefined>(
+        (window.location.search?.replace("?issue=", "") || undefined) as ID<Issue> | undefined,
+    );
+    // old
+    const issue = useCoState(Issue, issueID); // old
+    // old
+    const createIssue = () => {// old
+        const newIssue = Issue.create(// old
+            { // old
+                title: "Buy terrarium", // old
+                description: "Make sure it's big enough for 10 snails.", // old
+                estimate: 5, // old
+                status: "backlog", // old
+            }, // old
+            { owner: me }, // old
+        ); // old
+        setIssueID(newIssue.id); // old
+        window.history.pushState({}, "", `?issue=${newIssue.id}`);
+    }; // old
+    // old
+    if (issue) { // old
+        return <IssueComponent issue={issue} />; // old
+    } else { // old
+        return <button onClick={createIssue}>Create Issue</button>; // old
+    } // old
+} // old
+// old
+export default App; // old
+```
+
+🏁 Now you should be able to create an issue, edit it, reload the page, and still see the same issue.
+
+<h3 id="remote-sync">Remote sync</h3>
+
+To see that sync is also already working, try the following:
+
+-   copy the URL to a new tab in the same browser window and see the same issue
+-   edit the issue and see the changes reflected in the other tab!
+
+This works because we load the issue as the same account that created it and owns it (remember setting `{ owner: me }`?).
+
+We'll learn more about access control in "Groups & Permissions", but for now let's build a super simple way of sharing an Issue by just making it publicly readable & writable.
+
+All we have to do is create a new group to own each new issue and add "everyone" as a "writer":
+
+{/* prettier-ignore */}
+```tsx
+import { useState } from "react"; // old
+import { Issue } from "./schema"; // old
+import { IssueComponent } from "./components/Issue.tsx"; // old
+import { useAccount, useCoState } from "./main"; // old
+import { ID, Group } from "jazz-tools"
+// old
+function App() { // old
+    const { me } = useAccount(); // old
+    const [issueID, setIssueID] = useState<ID<Issue> | undefined>(// old
+        (window.location.search?.replace("?issue=", "") || undefined) as ID<Issue> | undefined,// old
+    ); // old
+    // old
+    const issue = useCoState(Issue, issueID); // old
+    // old
+    const createIssue = () => { // old
+        const group = Group.create({ owner: me });
+        group.addMember("everyone", "writer");
+        // old
+        const newIssue = Issue.create( // old
+            { // old
+                title: "Buy terrarium", // old
+                description: "Make sure it's big enough for 10 snails.", // old
+                estimate: 5, // old
+                status: "backlog", // old
+            }, // old
+            { owner: group },
+        ); // old
+        setIssueID(newIssue.id); // old
+        window.history.pushState({}, "", `?issue=${newIssue.id}`); // old
+    }; // old
+    // old
+    if (issue) { // old
+        return <IssueComponent issue={issue} />; // old
+    } else { // old
+        return <button onClick={createIssue}>Create Issue</button>; // old
+    } // old
+} // old
+// old
+export default App; // old
+```
+
+🏁 Now you should be able to open the Issue (with its unique URL) on another device or browser, or send it to a friend and you should be able to **edit it together in realtime!**
+
+This concludes our intro to the essence of CoValues. Hopefully you're starting to have a feeling for how CoValues behave and how they're magically available everywhere.
 
 <h2 id="refs-and-on-demand-subscribe">Refs & Auto-Subscribe</h2>
 
+Now let's have a look at how to compose CoValues into more complex structures and build a whole app around them.
+
+Let's extend our two data model to include "Projects" which have a list of tasks and some properties of their own.
+
+Using plain objects, you would probably type a Project like this:
+
+```ts
+type Project = {
+    name: string;
+    issues: Issue[];
+};
+```
+
+In order to create this more complex structure in a fully collaborative way, we're going to need _references_ that allow us to nest or link CoValues.
+
+Add the following to `src/schema.ts`:
+
+```ts
+import { CoMap, CoList, co } from "jazz-tools";
+// old
+export class Issue extends CoMap { // old
+    title = co.string; // old
+    description = co.string; // old
+    estimate = co.number; // old
+    status? = co.literal("backlog", "in progress", "done"); // old
+} // old
+// old
+export class ListOfIssues extends CoList.Of(co.ref(Issue)) {}
+
+export class Project extends CoMap {
+    name = co.string;
+    issues = co.ref(ListOfIssues);
+}
+```
+
+Now let's change things up a bit in terms of components as well.
+
+First, we'll change `App.tsx` to create and render `Project`s instead of `Issue`s. (We'll move the `useCoState` into the `ProjectComponent` we'll create in a second).
+
+{/* prettier-ignore */}
+```tsx
+import { useState } from "react"; // old
+import { Project, ListOfIssues } from "./schema";
+import { ProjectComponent } from "./components/Project.tsx";
+import { useAccount } from "./main";
+import { ID, Group } from "jazz-tools"
+// old
+function App() { // old
+    const { me } = useAccount(); // old
+    const [projectID, setProjectID] = useState<ID<Project> | undefined>(
+        (window.location.search?.replace("?project=", "") || undefined) as ID<Project> | undefined,// old
+    );
+    // old
+    const issue = useCoState(Issue, issueID); // *bin*
+    // old
+    const createProject = () => {
+        const group = Group.create({ owner: me });
+        group.addMember("everyone", "writer");
+
+        const newProject = Project.create(
+            {
+                name: "New Project",
+                issues: ListOfIssues.create([], { owner: group })
+            },
+            { owner: group },
+        );
+        setProjectID(newProject.id);
+        window.history.pushState({}, "", `?project=${newProject.id}`);
+    };
+    // old
+    if (projectID) {
+        return <ProjectComponent projectID={projectID} />;
+    } else {
+        return <button onClick={createProject}>Create Project</button>;
+    }
+} // old
+// old
+export default App; // old
+```
+
+Now we'll actually create the `ProjectComponent` that renders a `Project` and its `Issue`s.
+
+Create a new file `src/components/Project.tsx` and add the following:
+
+{/* prettier-ignore */}
+```tsx
+import { ID } from "jazz-tools";
+import { Project, Issue } from "../schema";
+import { IssueComponent } from "./Issue.tsx";
+import { useCoState } from "../main";
+
+export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {
+    const project = useCoState(Project, projectID);
+
+    const createAndAddIssue = () => {
+        project?.issues?.push(Issue.create({
+            title: "",
+            description: "",
+            estimate: 0,
+            status: "backlog",
+        }, { owner: project._owner }));
+    };
+
+    return project ? (
+        <div>
+            <h1>{project.name}</h1>
+            <div className="border-r border-b">
+                {project.issues?.map((issue) => (
+                    issue && <IssueComponent key={issue.id} issue={issue} />
+                ))}
+                <button onClick={createAndAddIssue}>Create Issue</button>
+            </div>
+        </div>
+    ) : (
+        <div>Loading project...</div>
+    );
+}
+```
+
+🏁 Now you should be able to create a project, add issues to it, share it, and edit it collaboratively!
+
+Two things to note here:
+
+-   We create a new Issue like before, and then push it into the `issues` list of the Project. By setting the `owner` to the Project's owner, we ensure that the Issue has the same access rights as the project itself.
+-   We only need to use `useCoState` on the Project, and the nested `ListOfIssues` and each `Issue` will be **automatically loaded and subscribed to when we access them.**
+-   However, because either the `Project`, `ListOfIssues`, or each `Issue` might not be loaded yet, we have to check for them being defined.
+
+The load-and-subscribe-on-access is a convenient way to have your rendering drive data loading (including in nested components!) and lets you quickly chuck UIs together without worrying too much about the shape of all data you'll need.
+
+But you can also take more precise control over loading by defining a minimum-depth to load in `useCoState`:
+
+{/* prettier-ignore */}
+```tsx
+import { ID } from "jazz-tools";// old
+import { Project, Issue } from "../schema"; // old
+import { IssueComponent } from "./Issue.tsx"; // old
+import { useCoState } from "../main"; // old
+// old
+export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {// old
+    const project = useCoState(Project, projectID, { issues: [{}] });
+
+    const createAndAddIssue = () => {// old
+        project?.issues.push(Issue.create({
+            title: "",// old
+            description: "",// old
+            estimate: 0,// old
+            status: "backlog",// old
+        }, { owner: project._owner }));// old
+    };// old
+// old
+    return project ? (// old
+        <div>// old
+            <h1>{project.name}</h1>// old
+            <div className="border-r border-b">// old
+                {project.issues.map((issue) => (
+                    <IssueComponent key={issue.id} issue={issue} />
+                ))}// old
+                <button onClick={createAndAddIssue}>Create Issue</button>// old
+            </div>// old
+        </div>// old
+    ) : (// old
+        <div>Loading project...</div>// old
+    );// old
+}// old
+```
+
+The loading-depth spec `{ issues: [{}] }` means "in `Project`, load `issues` and load each item in `issues` shallowly". (Since an `Issue` doesn't have any further references, "shallowly" actually means all its properties will be available).
+
+-   Now, we can get rid of a lot of coniditional accesses because we know that once `project` is loaded, `project.issues` and each `Issue` in it will be loaded as well.
+-   This also results in only one rerender and visual update when everything is loaded, which is faster (especially for long lists) and gives you more control over the loading UX.
+
+TODO: explainer about not loaded vs not set/defined and `_refs` basics
+
+<div className="text-amber-500 mt-52">
+    🚧 OH NO - This is as far as we've written the Guide. 🚧
+</div>
+{" -> "}
+<a href="https://github.com/gardencmp/jazz/issues/186">Complain on GitHub</a>
+
 <h2 id="groups-and-permissions">Groups & Permissions</h2>
 
-<h2 id="accounts-and-migrations">Accounts & Migrations</h2>
+<h2 id="auth-accounts-and-migrations">Auth, Accounts & Migrations</h2>
 
-<h2 id="backend-workers">Backend Workers</h2>
+<h2 id="edits-and-time-travel">Edit Metadata & Time Travel</h2>
+
+<h2 id="backend-workers">Backend Workers</h2>

homepage/homepage/app/docs/page.tsx

@@ -1,6 +1,7 @@
 import { DocNav } from "@/components/docs/nav";
 import { PackageDocs } from "@/components/docs/packageDocs";
 import Guide from "./guide.mdx";
+import { Prose } from "@/components/forMdx";
 
 export const metadata = {
     title: "jazz - Docs",
@@ -10,44 +11,50 @@ export const metadata = {
 export default function Page() {
     return (
         <>
-            <div className="hidden md:block bg-stone-100 dark:bg-stone-900 p-4 rounded-xl sticky overflow-y-scroll overscroll-contain w-[16rem] h-[calc(100dvh-8rem)] -mb-[calc(100dvh-8rem)] top-[6rem] mr-10 prose-sm prose-ul:pl-1 prose-ul:ml-1 prose-li:my-2 prose-li:leading-tight prose-ul:list-['-']">
+            <div className="hidden md:block bg-stone-100 dark:bg-stone-900 text-stone-700 dark:text-stone-300 p-4 rounded-xl sticky overflow-y-scroll overscroll-contain w-[16rem] h-[calc(100dvh-8rem)] -mb-[calc(100dvh-8rem)] top-[6rem] mr-10 prose-sm prose-ul:pl-1 prose-ul:ml-1 prose-li:my-2 prose-li:leading-tight prose-ul:list-['-']">
                 <DocNav />
             </div>
 
-            <div className="md:ml-[20rem]">
-                <Guide />
+            <div className="md:ml-[20rem] text-base">
+                <Prose className="prose">
+                    <Guide />
 
-                <h1 id="faq">FAQ</h1>
-
-                <p>
-                    <span className="text-amber-500">
-                        🚧 OH NO - We don&apos;t have any FAQ yet. 🚧
-                    </span>{" "}
-                    {"->"}{" "}
-                    <a href="https://github.com/gardencmp/jazz/issues/187">
-                        Complain on GitHub
-                    </a>
-                </p>
-
-                <div className="xl:-mr-[calc(50vw-40rem)]">
-                    <h1>API Reference</h1>
+                    <h1 id="faq">FAQ</h1>
 
                     <p>
                         <span className="text-amber-500">
-                            🚧 OH NO - These docs are still highly
-                            work-in-progress. 🚧
+                            🚧 OH NO - We don&apos;t have any FAQ yet. 🚧
                         </span>{" "}
                         {"->"}{" "}
-                        <a href="https://github.com/gardencmp/jazz/issues/188">
+                        <a href="https://github.com/gardencmp/jazz/issues/187">
                             Complain on GitHub
                         </a>
                     </p>
+                </Prose>
 
-                    <PackageDocs package="jazz-tools" />
-                    <PackageDocs package="jazz-react" />
-                    <PackageDocs package="jazz-browser" />
-                    <PackageDocs package="jazz-browser-media-images" />
-                    <PackageDocs package="jazz-nodejs" />
+                <div className="xl:-mr-[calc(50vw-40rem)]">
+                    <Prose>
+                        <h1>API Reference</h1>
+
+                        <p>
+                            <span className="text-amber-500">
+                                🚧 OH NO - These docs are still highly
+                                work-in-progress. 🚧
+                            </span>{" "}
+                            {"->"}{" "}
+                            <a href="https://github.com/gardencmp/jazz/issues/188">
+                                Complain on GitHub
+                            </a>
+                        </p>
+                    </Prose>
+
+                    <div className="text-stone-800 dark:text-stone-200">
+                        <PackageDocs package="jazz-tools" />
+                        <PackageDocs package="jazz-react" />
+                        <PackageDocs package="jazz-browser" />
+                        <PackageDocs package="jazz-browser-media-images" />
+                        <PackageDocs package="jazz-nodejs" />
+                    </div>
                 </div>
             </div>
         </>

homepage/homepage/app/globals.css

@@ -394,12 +394,12 @@ body {
     --shiki-color-text: #606060;
     --shiki-color-background: transparent;
     --shiki-token-constant: #00a5a5;
-    --shiki-token-string: #1aa245;
+    --shiki-token-string: #4e3a2c;
     --shiki-token-comment: #aaa;
     --shiki-token-keyword: #7b8bff;
     --shiki-token-parameter: #ff9800;
     --shiki-token-function: #445dd7;
-    --shiki-token-string-expression: #1aa245;
+    --shiki-token-string-expression: #38a35f;
     --shiki-token-punctuation: #969696;
     --shiki-token-link: #1aa245;
 }
@@ -407,7 +407,7 @@ body {
 .dark body {
     --shiki-color-text: #d1d1d1;
     --shiki-token-constant: #2dc9c9;
-    --shiki-token-string: #ffab70;
+    --shiki-token-string: #feb179;
     --shiki-token-comment: #6b737c;
     --shiki-token-keyword: #7b8bff;
     --shiki-token-parameter: #ff9800;

homepage/homepage/app/layout.tsx

@@ -9,9 +9,11 @@ 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";
 import { DocNav } from "@/components/docs/nav";
 
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import { Analytics } from "@vercel/analytics/react";
+
 // If loading a variable font, you don't need to specify the font weight
 const manrope = Manrope({
     subsets: ["latin"],
@@ -48,6 +50,8 @@ export default function RootLayout({
                     "flex flex-col items-center bg-stone-50 dark:bg-stone-950 overflow-x-hidden",
                 ].join(" ")}
             >
+                <SpeedInsights />
+                <Analytics />
                 <ThemeProvider
                     attribute="class"
                     defaultTheme="system"
@@ -101,29 +105,14 @@ export default function RootLayout({
                         docNav={<DocNav />}
                     />
                     <main className="flex min-h-screen flex-col p-8 max-w-[80rem] w-full [&_*]:scroll-mt-[6rem]">
-                        <article
-                            className={[
-                                "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",
-                                "prose-pre:max-w-3xl prose-pre:text-[0.8em] prose-pre:leading-[1.3] prose-pre:-mt-4 prose-pre:my-4 prose-pre:px-3 prose-pre:py-2 md:prose-pre:-mx-3 prose-pre:bg-stone-100 dark:prose-pre:bg-stone-900",
-
-                                "prose-inner-code:font-normal prose-inner-code:text-[1em]",
-                            ].join(" ")}
-                        >
-                            {children}
-                        </article>
+                        {children}
                     </main>
                     <footer className="flex z-10 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
+                                    © {new Date().getFullYear()}
                                     <br />
                                     Garden Computing, Inc.
                                 </p>
@@ -207,12 +196,6 @@ export default function RootLayout({
                         </div>
                     </footer>
                 </ThemeProvider>
-                <script
-                    defer
-                    data-api="/api/event"
-                    data-domain="jazz.tools"
-                    src="/js/script.js"
-                ></script>
             </body>
         </html>
     );

homepage/homepage/app/mesh/page.mdx

@@ -4,6 +4,7 @@ import {
     GridCard,
     GridItem,
     ComingSoonBadge,
+    Prose,
 } from "@/components/forMdx";
 
 export const metadata = {
@@ -13,6 +14,8 @@ export const metadata = {
 
 <div className="md:pt-20" />
 
+<Prose>
+
 # Sync & Storage Mesh
 
 <Slogan>The first Collaboration Delivery Network.</Slogan>
@@ -251,3 +254,5 @@ Costs:
 </div>
 </GridCard>
 </Grid>
+
+</Prose>

homepage/homepage/app/page.mdx

@@ -7,8 +7,9 @@ import {
     MultiplayerIcon,
     ResponsiveIframe,
     ComingSoonBadge,
+    Prose
 } from "@/components/forMdx";
-import { JazzLogo } from "@/components/logos";
+import { JazzLogo, LocalFirstConfLogo } from "@/components/logos";
 import {
     WorkflowIcon,
     UploadCloudIcon,
@@ -18,12 +19,15 @@ import {
     UsersIcon,
     FileLock2Icon,
     HardDriveDownloadIcon,
+    KeyRoundIcon
 } from "lucide-react";
 import { App_tsx, ChatScreen_tsx } from "@/codeSamples/examples/chat/src";
 import Link from "next/link";
 
 <div className="md:pt-20" />
 
+<Prose>
+
 # Instant sync.
 
 <Slogan>A new way to build apps with distributed state.</Slogan>
@@ -32,12 +36,12 @@ import Link from "next/link";
 <GridFeature icon={<MonitorSmartphoneIcon strokeWidth={1} strokeLinecap="butt" size={40}/>}>Cross-device sync</GridFeature>
 <GridFeature icon={<MultiplayerIcon strokeWidth={1} strokeLinecap="butt" size={40}/>}>Real-time multiplayer</GridFeature>
 <GridFeature icon={<UsersIcon strokeWidth={1} strokeLinecap="butt" size={40}/>}>Team/social features</GridFeature>
-<GridFeature icon={<FileLock2Icon strokeWidth={1} strokeLinecap="butt" size={40}/>}>Precise permissions</GridFeature>
-{/* <GridFeature icon={<WorkflowIcon strokeWidth={1} strokeLinecap="butt" size={40}/>}>On-demand granular data‑fetching</GridFeature> */}
+<GridFeature icon={<FileLock2Icon strokeWidth={1} strokeLinecap="butt" size={40}/>}>Built-in permissions</GridFeature>
 <GridFeature icon={<UploadCloudIcon strokeWidth={1} strokeLinecap="butt" size={40}/>}>Cloud sync & storage</GridFeature>
 <GridFeature icon={<HardDriveDownloadIcon strokeWidth={1} strokeLinecap="butt" size={40}/>}>On-device storage</GridFeature>
-<GridFeature icon={<PlaneIcon strokeWidth={1} strokeLinecap="butt" size={40}/>}>Full offline support</GridFeature>
 <GridFeature icon={<GaugeIcon strokeWidth={1} strokeLinecap="butt" size={40}/>}>Instant UI updates</GridFeature>
+<GridFeature icon={<KeyRoundIcon strokeWidth={1} strokeLinecap="butt" size={40}/>}>E2EE & signatures</GridFeature>
+
 <div className="col-start-1 row-start-1 row-span-2 col-span-2 px-4 md:px-6 text-base">
 <h2 className="not-prose text-2xl font-medium tracking-tight mt-3 md:mt-5 mb-6">Hard things are easy now.</h2>
 
@@ -264,9 +268,7 @@ Jazz Mesh is currently free &mdash; and it's set up as the default sync & storag
 
 ## Get Started
 
--   <Link href="/docs" target="_blank">
-        Read the docs
-    </Link>
--   <Link href="https://discord.gg/utDMjHYg42" target="_blank">
-        Join our Discord
-    </Link>
+-   <Link href="/docs" target="_blank">Read the docs</Link>
+-   <Link href="https://discord.gg/utDMjHYg42" target="_blank">Join our Discord</Link>
+
+</Prose>

homepage/homepage/components/docs/nav.tsx

@@ -6,7 +6,7 @@ import { PackageIcon } from "lucide-react";
 export function DocNav() {
     return (
         <>
-            <p className="mt-0 not-prose font-medium">
+            <p className="mt-0 font-medium">
                 <DocNavLink href="#guide">Guide</DocNavLink>
             </p>
 
@@ -20,38 +20,38 @@ export function DocNav() {
                     </DocNavLink>
                     <ul>
                         <li>
-                            <DocNavLink href="#intro-to-covalues">
+                            <DocNavLink href="#declaring-covalues">
                                 Declaration
                             </DocNavLink>
                         </li>
                         <li>
-                            <DocNavLink href="#intro-to-covalues">
+                            <DocNavLink href="#reading-covalues">
                                 Reading
                             </DocNavLink>
                         </li>
                         <li>
-                            <DocNavLink href="#intro-to-covalues">
+                            <DocNavLink href="#creating-covalues">
                                 Creation
                             </DocNavLink>
                         </li>
                         <li>
-                            <DocNavLink href="#intro-to-covalues">
+                            <DocNavLink href="#editing-and-subscription">
                                 Editing & Subscription
                             </DocNavLink>
                         </li>
                         <li>
-                            <DocNavLink href="#intro-to-covalues">
+                            <DocNavLink href="#persistence">
                                 Persistence
                             </DocNavLink>
                         </li>
                         <li>
-                            <DocNavLink href="#intro-to-covalues">
+                            <DocNavLink href="#remote-sync">
                                 Remote Sync
                             </DocNavLink>
                         </li>
                         <li>
-                            <DocNavLink href="#intro-to-covalues">
-                                Public Sharing
+                            <DocNavLink href="#simple-public-sharing">
+                                Simple Public Sharing
                             </DocNavLink>
                         </li>
                     </ul>
@@ -67,8 +67,13 @@ export function DocNav() {
                     </DocNavLink>
                 </li>
                 <li>
-                    <DocNavLink href="#accounts-and-migrations">
-                        Accounts & Migrations
+                    <DocNavLink href="#auth-accounts-and-migrations">
+                        Auth, Accounts & Migrations
+                    </DocNavLink>
+                </li>
+                <li>
+                    <DocNavLink href="#edits-and-time-travel">
+                        Edit Metadata & Time Travel
                     </DocNavLink>
                 </li>
                 <li>
@@ -100,7 +105,7 @@ export async function NavPackage({
 
     return (
         <>
-            <h2 className="text-sm not-prose mt-4 flex gap-1 items-center -mx-4 px-4 pt-4 border-t border-stone-200 dark:border-stone-800 ">
+            <h2 className="text-sm mt-4 flex gap-1 items-center -mx-4 px-4 pt-4 border-t border-stone-200 dark:border-stone-800 ">
                 <code className="font-bold">{packageName}</code>{" "}
                 <PackageIcon size={15} strokeWidth={1.5} />
             </h2>
@@ -123,7 +128,7 @@ export async function NavPackage({
                                         <>
                                             <a
                                                 key={child.id}
-                                                className="inline-block not-prose px-1 m-0.5 bg-stone-200 dark:bg-stone-800 rounded opacity-70 hover:opacity-100 cursor-pointer"
+                                                className="text-sm inline-block px-2 m-0.5 text-stone-800 dark:text-stone-200 bg-stone-200 dark:bg-stone-800 rounded opacity-70 hover:opacity-100 cursor-pointer"
                                                 href={`#${packageName}/${child.name}`}
                                             >
                                                 <code>{child.name}</code>
@@ -150,7 +155,7 @@ export function DocNavLink({
     return (
         <a
             href={href}
-            className="not-prose hover:text-black dark:hover:text-white"
+            className="hover:text-black dark:hover:text-white py-1 hover:transition-colors"
         >
             {children}
         </a>

homepage/homepage/components/docs/packageDocs.tsx

@@ -5,6 +5,7 @@ import {
     SignatureReflection,
     SomeType,
     TypeContext,
+    TypeParameterReflection,
 } from "typedoc";
 import {
     ClassOrInterface,
@@ -115,13 +116,18 @@ function RenderTypeAlias({
     inPackage: string;
     child: DeclarationReflection;
 }) {
+    const typeParameters = child.typeParameters?.map(
+        (tParam) =>
+            tParam.name +
+            (tParam.type ? ` extends ${printType(tParam.type)}` : ""),
+    );
     return (
         <div className="mt-4">
             <h4 className="not-prose" id={inPackage + "/" + child.name}>
                 <Highlight>{`type ${child.name}`}</Highlight>
             </h4>
             <p className="not-prose text-sm ml-4">
-                <Highlight>{`type ${child.name} = ${printType(
+                <Highlight>{`type ${child.name}${typeParameters?.length && `<${typeParameters?.join(", ")}>`} = ${printType(
                     child.type,
                 )}`}</Highlight>
             </p>
@@ -144,13 +150,34 @@ function RenderClassOrInterface({
     classOrInterface: DeclarationReflection;
 }) {
     const commentSummary = classOrInterface.comment?.summary;
+    const typeParamsWithConstraints = printTypeParamsWithConstraints(
+        classOrInterface.typeParameters,
+    );
     return (
         <ClassOrInterface
             inPackage={inPackage}
             name={classOrInterface.name}
             doc={renderSummary(commentSummary)}
             isInterface={classOrInterface.kind === ReflectionKind.Interface}
+            typeParameters={
+                classOrInterface.typeParameters?.length
+                    ? "<" +
+                      classOrInterface.typeParameters
+                          .map((tParam) => tParam.name)
+                          .join(", ") +
+                      ">"
+                    : ""
+            }
         >
+            {typeParamsWithConstraints.length > 0 && (
+                <div className="text-sm -mt-4">
+                    <Highlight
+                        hide={[0, 1 + typeParamsWithConstraints.length]}
+                    >{`class Thing<\n${typeParamsWithConstraints.join(
+                        ",\n",
+                    )}\n]> {}`}</Highlight>
+                </div>
+            )}
             {classOrInterface.categories?.map((category) => (
                 <div key={category.title}>
                     <PropCategory
@@ -186,7 +213,14 @@ function RenderClassOrInterface({
 function renderSummary(commentSummary: CommentDisplayPart[] | undefined) {
     return commentSummary?.map((part, idx) =>
         part.kind === "text" ? (
-            <span key={idx}>{part.text}</span>
+            <span key={idx}>
+                {part.text.split("\n").map((line, i, lines) => (
+                    <>
+                        {line}
+                        {i !== lines.length - 1 && <br />}
+                    </>
+                ))}
+            </span>
         ) : part.kind === "inline-tag" ? (
             <code key={idx}>
                 {part.tag} {part.text}
@@ -222,6 +256,9 @@ function RenderProp({
                 <FnDecl
                     key={signature.id}
                     signature={printSimplePropSignature(prop, klass, signature)}
+                    typeParams={printTypeParamsWithConstraints(
+                        signature.typeParameters,
+                    )}
                     paramTypes={printParamsWithTypes(signature)}
                     returnType={printType(signature.type)}
                     doc={renderSummary(signature.comment?.summary)}
@@ -267,15 +304,7 @@ function printSimpleSignature(
     return `${item.name}${
         signature.typeParameters?.length
             ? "<" +
-              signature.typeParameters
-                  .map(
-                      (tParam) =>
-                          tParam.name +
-                          (tParam.type
-                              ? " extends " + printType(tParam.type)
-                              : ""),
-                  )
-                  .join(", ") +
+              signature.typeParameters.map((tParam) => tParam.name).join(", ") +
               ">"
             : ""
     }(${printParams(signature)?.join(", ")})`;
@@ -283,18 +312,23 @@ function printSimpleSignature(
 
 function printParams(signature: SignatureReflection) {
     return (
-        signature.parameters?.map((param) =>
-            param.name === "__namedParameters" &&
-            param.type?.type === "reflection"
-                ? "{ " +
-                  param.type.declaration.children
-                      ?.map(
-                          (child) =>
-                              child.name + (child.flags.isOptional ? "?" : ""),
-                      )
-                      .join(", ") +
-                  " }"
-                : param.name + (param.defaultValue ? "?" : ""),
+        signature.parameters?.flatMap((param) =>
+            param.name === "this"
+                ? []
+                : [
+                      param.name === "__namedParameters" &&
+                      param.type?.type === "reflection"
+                          ? "{ " +
+                            param.type.declaration.children
+                                ?.map(
+                                    (child) =>
+                                        child.name +
+                                        (child.flags.isOptional ? "?" : ""),
+                                )
+                                .join(", ") +
+                            " }"
+                          : param.name + (param.defaultValue ? "?" : ""),
+                  ],
         ) || []
     );
 }
@@ -311,6 +345,18 @@ function printParamsWithTypes(signature: SignatureReflection) {
     );
 }
 
+function printTypeParamsWithConstraints(
+    typeParams: TypeParameterReflection[] | undefined,
+): string[] {
+    return (
+        typeParams?.flatMap((tParam) =>
+            tParam.type
+                ? [`${tParam.name} extends ${printType(tParam.type)}`]
+                : [],
+        ) || []
+    );
+}
+
 function printType(type: SomeType | undefined): string {
     if (!type) return "NO TYPE";
     if (type.type === "reflection") {

homepage/homepage/components/docs/tags.tsx

@@ -43,12 +43,14 @@ export async function Highlight({
 export function ClassOrInterface({
     inPackage,
     name,
+    typeParameters,
     children,
     doc,
     isInterface,
 }: {
     inPackage: string;
     name: string;
+    typeParameters?: string;
     children: ReactNode;
     doc: ReactNode;
     isInterface?: boolean;
@@ -66,7 +68,9 @@ export function ClassOrInterface({
             <h4 className="peer sticky top-0 pt-[0.5rem] md:top-[2.5rem] md:pt-[3rem] bg-stone-50 dark:bg-stone-950 z-20">
                 <a href={"#" + inPackage + "/" + name}>
                     <Highlight>
-                        {(isInterface ? "interface " : "class ") + name}
+                        {(isInterface ? "interface " : "class ") +
+                            name +
+                            typeParameters}
                     </Highlight>
                 </a>
             </h4>
@@ -131,12 +135,14 @@ export function PropDecl({
 
 export function FnDecl({
     signature,
+    typeParams,
     paramTypes,
     returnType,
     doc,
     example,
 }: {
     signature: string;
+    typeParams: string[];
     paramTypes: string[];
     returnType: string;
     doc: ReactNode;
@@ -150,7 +156,16 @@ export function FnDecl({
                     <Highlight>{returnType}</Highlight>
                 </span>
             </div>
-            <div className="ml-4 mt-2 text-xs opacity-75 flex">
+            <div className="ml-4 mt-2 text-xs opacity-75 flex flex-col gap-2">
+                {typeParams.length > 0 && (
+                    <div>
+                        <Highlight
+                            hide={[0, 1 + typeParams.length]}
+                        >{`class Thing<\n${typeParams.join(
+                            ",\n",
+                        )}\n]> {}`}</Highlight>
+                    </div>
+                )}
                 {paramTypes.length > 0 && (
                     <div>
                         <Highlight

homepage/homepage/components/forMdx.tsx

@@ -1,3 +1,24 @@
+export function Prose(props: { children: ReactNode; className?: string }) {
+    return (
+        <div
+            className={[
+                "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:rounded",
+                "prose-pre:text-black dark:prose-pre:text-white prose-pre:max-w-3xl prose-pre:text-[0.8em] prose-pre:leading-[1.3] prose-pre:-mt-2 prose-pre:my-4 prose-pre:px-10 prose-pre:py-2 prose-pre:-mx-10 prose-pre:bg-transparent",
+                "[&_pre_.line]:relative [&_pre_.line]:min-h-[1.3em] [&_pre_.lineNo]:text-[0.75em] [&_pre_.lineNo]:text-stone-300 [&_pre_.lineNo]:dark:text-stone-700 [&_pre_.lineNo]:absolute [&_pre_.lineNo]:text-right [&_pre_.lineNo]:w-8 [&_pre_.lineNo]:-left-10 [&_pre_.lineNo]:top-[0.3em] [&_pre_.lineNo]:select-none",
+                props.className || "prose lg:prose-lg",
+            ].join(" ")}
+        >
+            {props.children}
+        </div>
+    );
+}
+
 export function Slogan(props: { children: ReactNode; small?: boolean }) {
     return (
         <div

homepage/homepage/next.config.mjs

@@ -41,21 +41,31 @@ function highlightPlugin() {
                 "css-variables",
             );
 
-            // match a meta tag like `subtle=0,1,2,3` and parse out the line numbers
-            const subtleTag = node.meta && node.meta.match(/subtle=\S+/);
-            const subtle =
-                subtleTag && subtleTag[0].split("=")[1].split(",").map(Number);
+            let lineNo = -1;
 
             node.type = "html";
             node.value = `<pre><code class="not-prose">${lines
-                .map((line, lineI) =>
-                    line
-                        .map(
-                            (token) =>
-                                `<span style="color: ${token.color};${subtle?.includes(lineI + 1) ? "opacity: 0.3;" : ""}">${escape(token.content)}</span>`,
-                        )
-                        .join(""),
-                )
+                .map((line) => {
+                    const isSubduedLine = line.some((token) =>
+                        token.content.includes("// old"),
+                    );
+                    const isBinnedLine = line.some((token) =>
+                        token.content.includes("// *bin*"),
+                    );
+                    if (!isBinnedLine) {
+                        lineNo++;
+                    }
+                    return (
+                        `<span class="line" style="${isBinnedLine ? "opacity: 0.3; text-decoration: line-through; user-select: none" : ""}"><div class="lineNo" style="${isSubduedLine ? "opacity: 0.3;" : ""}${isBinnedLine ? "color: red;" : ""}">${node.lang === "bash" ? ">" : isBinnedLine ? "✕" : (lineNo + 1)}</div>` +
+                        line
+                            .map(
+                                (token) =>
+                                    `<span style="color: ${isBinnedLine ? "red" : token.color};${isSubduedLine ? "opacity: 0.3;" : ""}">${escape(token.content.replace("// old", "").replace("// *bin*", ""))}</span>`,
+                            )
+                            .join("") +
+                        "</span>"
+                    );
+                })
                 .join("\n")}</code></pre>`;
             node.children = [];
             return SKIP;

homepage/homepage/package.json

@@ -14,6 +14,7 @@
         "*.{ts,tsx}": "eslint --fix",
         "*.{js,jsx,mdx,json}": "prettier --write"
     },
+    "packageManager": "pnpm@9.1.4",
     "dependencies": {
         "@evilmartians/harmony": "^1.0.0",
         "@icons-pack/react-simple-icons": "^9.1.0",
@@ -21,6 +22,8 @@
         "@mdx-js/react": "^2.3.0",
         "@next/mdx": "^13.5.4",
         "@types/mdx": "^2.0.8",
+        "@vercel/analytics": "^1.3.1",
+        "@vercel/speed-insights": "^1.0.12",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
         "lucide-react": "^0.284.0",

homepage/homepage/tailwind.config.ts

@@ -92,12 +92,6 @@ const config: Config = {
             },
         },
     },
-    plugins: [
-        tailwindCSSAnimate,
-        typography(),
-        typography({
-            className: "prose-inner",
-        }),
-    ],
+    plugins: [tailwindCSSAnimate, typography()],
 };
 export default config;

oldExamples/chat-passphrase/CHANGELOG.md

@@ -1,26 +0,0 @@
-# jazz-example-chat
-
-## 0.0.48-alpha.0
-
-### Patch Changes
-
-- Updated dependencies
-  - hash-slash@0.2.0-alpha.0
-  - jazz-react@0.7.0-alpha.0
-  - cojson@0.7.0-alpha.0
-
-## 0.0.47
-
-### Patch Changes
-
-- Implement passphrase based auth
-- Updated dependencies
-  - jazz-react-auth-passphrase@0.5.1
-
-## 0.0.46
-
-### Patch Changes
-
-- Updated dependencies
-  - jazz-react@0.5.0
-  - jazz-react-auth-local@0.4.16

oldExamples/chat-passphrase/README.md

@@ -1,42 +0,0 @@
-# Jazz Chat Example (with passphrase auth)
-
-Live version: https://example-chat-passphrase.jazz.tools
-
-## Installing & running the example locally
-
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
-
-Start by checking out `jazz`
-```bash
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/chat-passphrase
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/chat-passphrase # or any other directory
-tar -xf /tmp/jazz-example-chat-passphrase-* --strip-components 1 -C ~/jazz-examples/chat-passphrase
-cd ~/jazz-examples/chat-passphrase
-```
-
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
-```bash
-pnpm install
-```
-
-Start the dev server:
-
-```bash
-pnpm dev
-```
-
-## 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 `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

oldExamples/chat-passphrase/src/app.tsx

@@ -1,45 +0,0 @@
-import { WithJazz, useJazz } from 'jazz-react';
-import { PassphraseAuth, PassphraseAuthBasicUI } from 'jazz-react-auth-passphrase';
-import ReactDOM from 'react-dom/client';
-import { HashRoute } from 'hash-slash';
-import { ChatWindow } from './chatWindow.tsx';
-import { Chat } from './dataModel.ts';
-
-import {wordlist} from '@scure/bip39/wordlists/english';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <WithJazz
-    auth={PassphraseAuth({
-      appName: 'Jazz Chat Example',
-      wordlist,
-      Component: PassphraseAuthBasicUI
-    })}
-    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>
-}

oldExamples/chat-passphrase/src/chatWindow.tsx

@@ -1,43 +0,0 @@
-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 = '';
-    }}/>
-}

oldExamples/chat-passphrase/src/dataModel.ts

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

oldExamples/cojson-simple-sync/.eslintrc.cjs

@@ -1,18 +0,0 @@
-module.exports = {
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-    ],
-    parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint'],
-    parserOptions: {
-        project: './tsconfig.json',
-    },
-    root: true,
-    rules: {
-        "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
-        "@typescript-eslint/no-floating-promises": "error",
-    },
-
-  };

oldExamples/cojson-simple-sync/CHANGELOG.md

@@ -1,42 +0,0 @@
-# cojson-simple-sync
-
-## 0.6.1-alpha.1
-
-### Patch Changes
-
-- Use effect schema much less
-- Updated dependencies
-  - cojson-storage-sqlite@0.5.3-alpha.1
-  - cojson@0.7.0-alpha.1
-
-## 0.6.1-alpha.0
-
-### Patch Changes
-
-- Updated dependencies
-  - cojson@0.7.0-alpha.0
-  - cojson-storage-sqlite@0.5.3-alpha.0
-
-## 0.6.0
-
-### Minor Changes
-
-- Make addMember and removeMember take loaded Accounts instead of just IDs
-
-### Patch Changes
-
-- Updated dependencies
-  - cojson@0.6.0
-  - cojson-storage-sqlite@0.5.2
-
-## 0.5.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-storage-sqlite@0.5.0
-  - cojson@0.5.0

oldExamples/cojson-simple-sync/package.json

@@ -1,40 +0,0 @@
-{
-    "name": "cojson-simple-sync",
-    "module": "dist/index.js",
-    "types": "src/index.ts",
-    "type": "module",
-    "license": "MIT",
-    "version": "0.6.1-alpha.1",
-    "devDependencies": {
-        "@types/jest": "^29.5.3",
-        "@types/ws": "^8.5.5",
-        "@typescript-eslint/eslint-plugin": "^6.2.1",
-        "@typescript-eslint/parser": "^6.2.1",
-        "eslint": "^8.46.0",
-        "jest": "^29.6.2",
-        "ts-jest": "^29.1.1",
-        "typescript": "5.0.2"
-    },
-    "dependencies": {
-        "cojson": "workspace:*",
-        "cojson-storage-sqlite": "workspace:*",
-        "isomorphic-streams": "https://github.com/sgwilym/isomorphic-streams.git#aa9394781bfc92f8d7c981be7daf8af4b4cd4fae",
-        "ws": "^8.13.0"
-    },
-    "scripts": {
-        "dev": "tsc --watch --sourceMap --outDir dist",
-        "build": "rm -rf ./dist && tsc --sourceMap --outDir dist && npm run add-shebang && chmod +x ./dist/index.js",
-        "add-shebang": "echo \"#!/usr/bin/env node\" | cat - ./dist/index.js > /tmp/out && mv /tmp/out ./dist/index.js",
-        "start": "node dist/index.js",
-        "inspect": "node --inspect dist/index.js",
-        "inspect-brk": "node --inspect-brk dist/index.js",
-        "test": "jest",
-        "prepublishOnly": "npm run build"
-    },
-    "bin": "./dist/index.js",
-    "jest": {
-        "preset": "ts-jest",
-        "testEnvironment": "node"
-    },
-    "gitHead": "33c27053293b4801b968c61d5c4c989f93a67d13"
-}

oldExamples/cojson-simple-sync/src/index.ts

@@ -1,56 +0,0 @@
-import { ControlledAgent, LocalNode, cojsonInternals, cojsonReady } from "cojson";
-import { WebSocketServer } from "ws";
-import { SQLiteStorage } from "cojson-storage-sqlite";
-import { websocketReadableStream, websocketWritableStream } from "./websocketStreams.js";
-
-const wss = new WebSocketServer({ port: 4200 });
-
-console.log("COJSON sync server listening on port " + wss.options.port);
-
-await cojsonReady;
-import { webcrypto } from 'node:crypto'
-(globalThis as any).crypto = webcrypto
-
-const agentSecret = cojsonInternals.newRandomAgentSecret();
-const agentID = cojsonInternals.getAgentID(agentSecret);
-
-const localNode = new LocalNode(
-    new ControlledAgent(agentSecret),
-    cojsonInternals.newRandomSessionID(agentID)
-);
-
-SQLiteStorage.asPeer({ filename: "./sync.db" })
-    .then((storage) => localNode.syncManager.addPeer(storage))
-    .catch((e) => console.error(e));
-
-wss.on("connection", function connection(ws, req) {
-    const pinging = setInterval(() => {
-        ws.send(
-            JSON.stringify({
-                type: "ping",
-                time: Date.now(),
-                dc: "cojson-simple-sync",
-            })
-        );
-    }, 2000);
-
-    ws.on("close", () => {
-        clearInterval(pinging);
-    });
-
-    const clientAddress =
-        (req.headers["x-forwarded-for"] as string | undefined)
-            ?.split(",")[0]
-            ?.trim() || req.socket.remoteAddress;
-
-    const clientId = clientAddress + "@" + new Date().toISOString() + Math.random().toString(36).slice(2);
-
-    localNode.syncManager.addPeer({
-        id: clientId,
-        role: "client",
-        incoming: websocketReadableStream(ws),
-        outgoing: websocketWritableStream(ws),
-    });
-
-    ws.on("error", (e) => console.error(`Error on connection ${clientId}:`, e));
-});

oldExamples/cojson-simple-sync/src/websocketStreams.ts

@@ -1,190 +0,0 @@
-import { WebSocket } from "ws";
-import { WritableStream, ReadableStream } from "isomorphic-streams";
-import { SyncMessage } from "cojson";
-
-let msgsInThisInterval = 0;
-let msgsOutThisInterval = 0;
-let txsInThisInterval = 0;
-let txsOutThisInterval = 0;
-let msgsInLastInterval = 0;
-let msgsOutLastInterval = 0;
-let txsInLastInterval = 0;
-let txsOutLastInterval = 0;
-let maxMsgsInPerS = 0;
-let maxMsgsOutPerS = 0;
-let maxTxsInPerS = 0;
-let maxTxsOutPerS = 0;
-let lastInterval = Date.now();
-const interval = 1_000;
-
-setInterval(() => {
-    const dt = (Date.now() - lastInterval) / 1000;
-
-    maxMsgsInPerS = Math.max(
-        maxMsgsInPerS,
-        Math.round(msgsInThisInterval / dt)
-    );
-    maxMsgsOutPerS = Math.max(
-        maxMsgsOutPerS,
-        Math.round(msgsOutThisInterval / dt)
-    );
-    maxTxsInPerS = Math.max(maxTxsInPerS, Math.round(txsInThisInterval / dt));
-    maxTxsOutPerS = Math.max(
-        maxTxsOutPerS,
-        Math.round(txsOutThisInterval / dt)
-    );
-
-    if (
-        msgsInThisInterval ||
-        msgsOutThisInterval ||
-        txsInThisInterval ||
-        txsOutThisInterval
-    ) {
-        console.log("++++++++++++++++++++++++++++++");
-        console.log(
-            "DT",
-            dt,
-            "Msgs in:",
-            msgsInThisInterval,
-            "out:",
-            msgsOutThisInterval,
-            "txs in:",
-            txsInThisInterval,
-            "out:",
-            txsOutThisInterval
-        );
-        console.log(
-            "MAX/s",
-            "Msgs in:",
-            maxMsgsInPerS,
-            "out:",
-            maxMsgsOutPerS,
-            "txs in:",
-            maxTxsInPerS,
-            "out:",
-            maxTxsOutPerS
-        );
-    }
-
-    msgsInLastInterval = msgsInThisInterval;
-    msgsOutLastInterval = msgsOutThisInterval;
-    txsInLastInterval = txsInThisInterval;
-    txsOutLastInterval = txsOutThisInterval;
-    msgsInThisInterval = 0;
-    msgsOutThisInterval = 0;
-    txsInThisInterval = 0;
-    txsOutThisInterval = 0;
-    lastInterval = Date.now();
-}, interval);
-
-export function websocketReadableStream<T>(ws: WebSocket) {
-    ws.binaryType = "arraybuffer";
-
-    return new ReadableStream<T>({
-        start(controller) {
-            ws.addEventListener("message", (event) => {
-                if (typeof event.data !== "string")
-                    return console.warn(
-                        "Got non-string message from client",
-                        event.data
-                    );
-                const msg = JSON.parse(event.data);
-                msgsInThisInterval++;
-                const syncMsg = msg as SyncMessage;
-                if (syncMsg.action === "content") {
-                    txsInThisInterval +=
-                        (syncMsg.header ? 1 : 0) +
-                        Object.values(syncMsg.new).reduce(
-                            (sum, sess) => sess.newTransactions.length + sum,
-                            0
-                        );
-                }
-
-                if (txsInLastInterval > 500 || txsOutLastInterval > 1_000) {
-                    ws.pause();
-                    const waitTime = Math.min(500, Math.max(txsOutLastInterval / 20, txsInLastInterval / 10));
-                    // console.log("Throttling", waitTime);
-                    setTimeout(() => ws.resume(), waitTime);
-                }
-
-                if (msg.type === "ping") {
-                    // console.debug(
-                    //     "Got ping from",
-                    //     msg.dc,
-                    //     "latency",
-                    //     Date.now() - msg.time,
-                    //     "ms"
-                    // );
-                    return;
-                }
-                controller.enqueue(msg);
-            });
-            ws.addEventListener("close", () => controller.close());
-            ws.addEventListener("error", () =>
-                controller.error(new Error("The WebSocket errored!"))
-            );
-        },
-
-        cancel() {
-            ws.close();
-        },
-    });
-}
-
-export function websocketWritableStream<T>(ws: WebSocket) {
-    return new WritableStream<T>({
-        start(controller) {
-            ws.addEventListener("close", () =>
-                controller.error(
-                    new Error("The WebSocket closed unexpectedly!")
-                )
-            );
-            ws.addEventListener("error", () =>
-                controller.error(new Error("The WebSocket errored!"))
-            );
-
-            if (ws.readyState === WebSocket.OPEN) {
-                return;
-            }
-
-            return new Promise((resolve) => ws.once("open", resolve));
-        },
-
-        write(chunk) {
-            msgsOutThisInterval++;
-            const syncMsg = chunk as SyncMessage;
-            if (syncMsg.action === "content") {
-                txsOutThisInterval +=
-                    (syncMsg.header ? 1 : 0) +
-                    Object.values(syncMsg.new).reduce(
-                        (sum, sess) => sess.newTransactions.length + sum,
-                        0
-                    );
-            }
-            ws.send(JSON.stringify(chunk));
-            // Return immediately, since the web socket gives us no easy way to tell
-            // when the write completes.
-        },
-
-        close() {
-            return closeWS(1000);
-        },
-
-        abort(reason) {
-            return closeWS(4000, reason && reason.message);
-        },
-    });
-
-    function closeWS(code: number, reasonString?: string) {
-        return new Promise<void>((resolve, reject) => {
-            ws.onclose = (e) => {
-                if (e.wasClean) {
-                    resolve();
-                } else {
-                    reject(new Error("The connection was not closed cleanly"));
-                }
-            };
-            ws.close(code, reasonString);
-        });
-    }
-}