Pre-release

Adopt neverthrow throughout cojson

.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,8 +3,6 @@ name: Build and Deploy
 on:
   push:
     branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
 
 jobs:
   build-examples:
@@ -53,53 +51,6 @@ 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
@@ -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"

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

@@ -1,6 +1,6 @@
-# Jazz Twit Example
+# Jazz Chat Example
 
-Live version: https://twit.jazz.tools
+Live version: https://example-chat.jazz.tools
 
 ## Installing & running the example locally
 
@@ -9,11 +9,11 @@ Live version: https://twit.jazz.tools
 Start by checking out `jazz`
 ```bash
 git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/twit
+cd jazz/examples/chat
 pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/twit # or any other directory
-tar -xf /tmp/jazz-example-twit-* --strip-components 1 -C ~/jazz-examples/twit
-cd ~/jazz-examples/twit
+mkdir -p ~/jazz-examples/chat # or any other directory
+tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat
+cd ~/jazz-examples/chat
 ```
 
 This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.

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,292 @@
 # 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

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.63",
+  "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/inspector/CHANGELOG.md

@@ -1,5 +1,219 @@
 # 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

examples/inspector/README.md

@@ -1,42 +1,7 @@
-# Jazz Chat Example
+# Jazz Inspector
 
-Live version: https://example-chat.jazz.tools
+Live address: https://inspector.jazz.tools
 
-## Installing & running the example locally
+Use this to visually inspect a Jazz account or other CoValue.
 
-(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
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/chat # or any other directory
-tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat
-cd ~/jazz-examples/chat
-```
-
-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 `<WithJazz>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+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

@@ -1,14 +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 Chat Example</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/app.tsx"></script>
-  </body>
-</html>
+
+<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": "jazz-inspector",
   "private": true,
-  "version": "0.0.47",
+  "version": "0.0.60-unique.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,7 +19,6 @@
     "hash-slash": "workspace:*",
     "cojson": "workspace:*",
     "cojson-transport-ws": "workspace:*",
-    "effect": "^3.1.5",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/inspector/src/app.tsx

@@ -1,309 +1,4 @@
 import ReactDOM from "react-dom/client";
-import {
-    RawAccount,
-    CoID,
-    RawCoValue,
-    SessionID,
-    LocalNode,
-    AgentSecret,
-    AccountID,
-    cojsonInternals,
-    WasmCrypto,
-} from "cojson";
-import { clsx } from "clsx";
-import { AccountInfo, CoJsonTree, Tag } from "./cojson-tree";
-import { useEffect, useState } from "react";
-import { createWebSocketPeer } from "cojson-transport-ws";
-import { Effect } from "effect";
+import App from "./viewer/new-app";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
-
-function App() {
-    const [accountID, setAccountID] = useState<CoID<RawAccount>>(
-        localStorage["inspectorAccountID"]
-    );
-    const [accountSecret, setAccountSecret] = useState<AgentSecret>(
-        localStorage["inspectorAccountSecret"]
-    );
-
-    const [coValueId, setCoValueId] = useState<CoID<RawCoValue>>(
-        window.location.hash.slice(2) as CoID<RawCoValue>
-    );
-
-    useEffect(() => {
-        window.addEventListener("hashchange", () => {
-            setCoValueId(window.location.hash.slice(2) as CoID<RawCoValue>);
-        });
-    });
-
-    const [localNode, setLocalNode] = useState<LocalNode>();
-
-    useEffect(() => {
-        if (!accountID || !accountSecret) return;
-        WasmCrypto.create().then(async (crypto) => {
-            const wsPeer = await Effect.runPromise(
-                createWebSocketPeer({
-                    id: "mesh",
-                    websocket: new WebSocket("wss://mesh.jazz.tools"),
-                    role: "server",
-                })
-            );
-            const node = await LocalNode.withLoadedAccount({
-                accountID: accountID,
-                accountSecret: accountSecret,
-                sessionID: cojsonInternals.newRandomSessionID(accountID),
-                peersToLoadFrom: [wsPeer],
-                crypto,
-                migration: async () => {
-                    console.log("Not running any migration in inspector");
-                },
-            });
-            setLocalNode(node);
-        });
-    }, [accountID, accountSecret]);
-
-    return (
-        <div className="flex flex-col items-center w-screen h-screen p-2 gap-2">
-            <div className="flex gap-2 items-center">
-                Account
-                <input
-                    className="border p-2 rounded"
-                    placeholder="Account ID"
-                    value={accountID}
-                    onChange={(e) => {
-                        setAccountID(e.target.value as AccountID);
-                        localStorage["inspectorAccountID"] = e.target.value;
-                    }}
-                />
-                <input
-                    type="password"
-                    className="border p-2 rounded"
-                    placeholder="Account Secret"
-                    value={accountSecret}
-                    onChange={(e) => {
-                        setAccountSecret(e.target.value as AgentSecret);
-                        localStorage["inspectorAccountSecret"] = e.target.value;
-                    }}
-                />
-                {localNode ? (
-                    <AccountInfo accountID={accountID} node={localNode} />
-                ) : (
-                    ""
-                )}
-            </div>
-            <div className="flex gap-2 items-center">
-                CoValue ID
-                <input
-                    className="border p-2 rounded min-w-[20rem]"
-                    placeholder="CoValue ID"
-                    value={coValueId}
-                    onChange={(e) =>
-                        setCoValueId(e.target.value as CoID<RawCoValue>)
-                    }
-                />
-            </div>
-            {coValueId && localNode ? (
-                <Inspect coValueId={coValueId} node={localNode} />
-            ) : null}
-        </div>
-    );
-}
-
-// function ImageCoValue({ value }: { value: ImageDefinition["_shape"] }) {
-//     const keys = Object.keys(value);
-//     const keyIncludingRes = keys.find((key) => key.includes("x"));
-//     const idToResolve = keyIncludingRes
-//         ? value[keyIncludingRes as `${number}x${number}`]
-//         : null;
-
-//     if (!idToResolve) return <div>Can't find image</div>;
-
-//     const [blobURL, setBlobURL] = useState<string>();
-
-//     useEffect(() => {
-
-//     })
-
-//     return (
-//         <img
-//             src={image?.blobURL || value.placeholderDataURL}
-//             alt="placeholder"
-//         />
-//     );
-// }
-
-function Inspect({
-    coValueId,
-    node,
-}: {
-    coValueId: CoID<RawCoValue>;
-    node: LocalNode;
-}) {
-    const [coValue, setCoValue] = useState<RawCoValue | "unavailable">();
-
-    useEffect(() => {
-        return node.subscribe(coValueId, (coValue) => {
-            setCoValue(coValue);
-        });
-    }, [node, coValueId]);
-
-    if (coValue === "unavailable") {
-        return <div>Unavailable</div>;
-    }
-
-    const values = coValue?.toJSON() || {};
-    const isImage =
-        typeof values === "object" && "placeholderDataURL" in values;
-    const isGroup = coValue?.core.header.ruleset?.type === "group";
-
-    const entires = Object.entries(values as any) as [string, string][];
-    const onlyCoValues = entires.filter(([key]) => key.startsWith("co_"));
-
-    let title = "";
-    if (isImage) {
-        title = "Image";
-    } else if (isGroup) {
-        title = "Group";
-    }
-
-    return (
-        <div className="mb-auto">
-            <h1 className="text-xl font-bold mb-2">
-                Inspecting {title}{" "}
-                <span className="text-gray-500 text-sm">{coValueId}</span>
-            </h1>
-
-            {isGroup ? (
-                <p>
-                    {onlyCoValues.length > 0 ? <h3>Permissions</h3> : ""}
-                    <div className="flex gap-2 flex-col">
-                        {onlyCoValues?.map(([key, value]) => (
-                            <div className="flex gap-1 items-center">
-                                <span className="bg-gray-200 text-xs px-2 py-0.5 rounded">
-                                    {value}
-                                </span>
-                                <AccountInfo
-                                    accountID={key as CoID<RawAccount>}
-                                    node={node}
-                                />
-                            </div>
-                        ))}
-                    </div>
-                </p>
-            ) : (
-                <span className="">
-                    Group{" "}
-                    <Tag href={`#/${coValue?.group.id}`}>
-                        {coValue?.group.id}
-                    </Tag>
-                </span>
-            )}
-            {/* {isImage ? (
-                <div className="my-2">
-                    <ImageCoValue value={values as any} />
-                </div>
-            ) : null} */}
-            <pre className="max-w-[80vw] overflow-scroll text-sm mt-4">
-                <CoJsonTree coValueId={coValueId} node={node} />
-            </pre>
-            <h2 className="text-lg font-semibold mt-10 mb-4">Sessions</h2>
-            {coValue && <Sessions coValue={coValue} node={node} />}
-        </div>
-    );
-}
-
-function Sessions({ coValue, node }: { coValue: RawCoValue; node: LocalNode }) {
-    const validTx = coValue.core.getValidSortedTransactions();
-    return (
-        <div className="max-w-[80vw] border rounded">
-            {[...coValue.core.sessionLogs.entries()].map(
-                ([sessionID, session]) => (
-                    <div
-                        key={sessionID}
-                        className="mv-10 flex gap-2 border-b p-5 flex-wrap  flex-col"
-                    >
-                        <div className="flex gap-2 flex-row">
-                            <SessionInfo
-                                sessionID={sessionID}
-                                transactionCount={session.transactions.length}
-                                node={node}
-                            />
-                        </div>
-                        <div className="flex gap-1 flex-wrap max-h-64 overflow-y-auto p-1 bg-gray-50 rounded">
-                            {session.transactions.map((tx, txIdx) => {
-                                const correspondingValidTx = validTx.find(
-                                    (validTx) =>
-                                        validTx.txID.sessionID === sessionID &&
-                                        validTx.txID.txIndex == txIdx
-                                );
-                                return (
-                                    <div
-                                        key={txIdx}
-                                        className={clsx(
-                                            "text-xs flex-1 p-2 border rounded min-w-36 max-w-40 overflow-scroll bg-white",
-                                            !correspondingValidTx &&
-                                                "bg-red-50 border-red-100"
-                                        )}
-                                    >
-                                        <div>
-                                            {new Date(
-                                                tx.madeAt
-                                            ).toLocaleString()}
-                                        </div>
-                                        <div>{tx.privacy}</div>
-                                        <pre>
-                                            {correspondingValidTx
-                                                ? JSON.stringify(
-                                                      correspondingValidTx.changes,
-                                                      undefined,
-                                                      2
-                                                  )
-                                                : "invalid/undecryptable"}
-                                        </pre>
-                                    </div>
-                                );
-                            })}
-                        </div>
-                        <div className="text-xs">
-                            {session.lastHash} / {session.lastSignature}{" "}
-                        </div>
-                    </div>
-                )
-            )}
-        </div>
-    );
-}
-
-function SessionInfo({
-    sessionID,
-    transactionCount,
-    node,
-}: {
-    sessionID: SessionID;
-    transactionCount: number;
-    node: LocalNode;
-}) {
-    let Prefix = sessionID.startsWith("co_") ? (
-        <AccountInfo
-            accountID={sessionID.split("_session_")[0] as CoID<RawAccount>}
-            node={node}
-        />
-    ) : (
-        <pre className="text-xs">{sessionID.split("_session_")[0]}</pre>
-    );
-
-    return (
-        <div>
-            {Prefix}
-            <div>
-                <span className="text-xs">
-                    Session {sessionID.split("_session_")[1]}
-                </span>
-                <span className="text-xs text-gray-600 font-medium">
-                    {" "}
-                    - {transactionCount} txs
-                </span>
-            </div>
-        </div>
-    );
-}

examples/inspector/src/cojson-tree.tsx

@@ -1,249 +0,0 @@
-import clsx from "clsx";
-import { AccountID, CoID, LocalNode, RawAccount, RawCoMap, RawCoValue } from "cojson";
-import { useEffect, useState } from "react";
-import { LinkIcon } from "./link-icon";
-
-export function CoJsonTree({
-    coValueId,
-    node,
-}: {
-    coValueId: CoID<RawCoValue>;
-    node: LocalNode;
-}) {
-    const [coValue, setCoValue] = useState<RawCoValue | "unavailable">();
-
-    useEffect(() => {
-        return node.subscribe(coValueId, (value) => {
-            setCoValue(value);
-        });
-    });
-
-    if (coValue === "unavailable") {
-        return <div className="text-red-500">Unavailable</div>;
-    }
-
-    const values = coValue?.toJSON() || {};
-
-    return <RenderCoValueJSON json={values} node={node} />;
-}
-
-function RenderObject({
-    json,
-    node,
-}: {
-    json: Record<string, any>;
-    node: LocalNode;
-}) {
-    const [limit, setLimit] = useState(10);
-    const hasMore = Object.keys(json).length > limit;
-
-    const entries = Object.entries(json).slice(0, limit);
-    return (
-        <div className="flex gap-x-1 flex-col font-mono text-xs overflow-auto">
-            {"{"}
-            {entries.map(([key, value]) => {
-                return (
-                    <RenderObjectValue
-                        property={key}
-                        value={value}
-                        node={node}
-                    />
-                );
-            })}
-            {hasMore ? (
-                <div
-                    className="text-gray-500 cursor-pointer"
-                    onClick={() => setLimit((l) => l + 10)}
-                >
-                    ... {Object.keys(json).length - limit} more
-                </div>
-            ) : null}
-            {"}"}
-        </div>
-    );
-}
-
-function RenderObjectValue({
-    property,
-    value,
-    node,
-}: {
-    property: string;
-    value: any;
-    node: LocalNode;
-}) {
-    const [shouldLoad, setShouldLoad] = useState(false);
-
-    const isCoValue =
-        typeof value === "string" ? value?.startsWith("co_") : false;
-
-    return (
-        <div className={clsx(`flex group`)}>
-            <div className="text-gray-500 flex items-start">
-                <div className="flex items-center">
-                    <RenderCoValueJSON json={property} node={node} />:{" "}
-                </div>
-            </div>
-
-            {isCoValue ? (
-                <div className={clsx(shouldLoad && "pb-2")}>
-                    <div className="flex items-center ">
-                        <div onClick={() => setShouldLoad((s) => !s)}>
-                            <div className="w-8 text-center text-gray-700 font-mono px-1 text-xs rounded hover:bg-gray-300 cursor-pointer">
-                                {shouldLoad ? `-` : `...`}
-                            </div>
-                        </div>
-                        <a
-                            href={`#/${value}`}
-                            className="ml-2 group-hover:block hidden"
-                        >
-                            <LinkIcon />
-                        </a>
-                    </div>
-                    <span>
-                        {shouldLoad ? (
-                            <CoJsonTree coValueId={value} node={node} />
-                        ) : null}
-                    </span>
-                </div>
-            ) : (
-                <div className="">
-                    <RenderCoValueJSON json={value} node={node} />
-                </div>
-            )}
-        </div>
-    );
-}
-
-function RenderCoValueArray({ json, node }: { json: any[]; node: LocalNode }) {
-    const [limit, setLimit] = useState(10);
-    const hasMore = json.length > limit;
-
-    const entries = json.slice(0, limit);
-    return (
-        <div className="flex gap-x-1 flex-col font-mono text-xs overflow-auto">
-            {entries.map((value, idx) => {
-                return (
-                    <div key={idx} className="flex gap-x-1">
-                        <RenderCoValueJSON json={value} node={node} />
-                    </div>
-                );
-            })}
-            {hasMore ? (
-                <div
-                    className="text-gray-500 cursor-pointer"
-                    onClick={() => setLimit((l) => l + 10)}
-                >
-                    ... {json.length - limit} more
-                </div>
-            ) : null}
-        </div>
-    );
-}
-
-function RenderCoValueJSON({
-    json,
-    node,
-}: {
-    json:
-        | Record<string, any>
-        | any[]
-        | string
-        | null
-        | number
-        | boolean
-        | undefined;
-    node: LocalNode;
-}) {
-    if (typeof json === "undefined") {
-        return <>"undefined"</>;
-    } else if (Array.isArray(json)) {
-        return (
-            <div className="">
-                <span className="text-gray-500">[</span>
-                <div className="ml-2">
-                    <RenderCoValueArray json={json} node={node} />
-                </div>
-                <span className="text-gray-500">]</span>
-            </div>
-        );
-    } else if (
-        typeof json === "object" &&
-        json &&
-        Object.getPrototypeOf(json) === Object.prototype
-    ) {
-        return <RenderObject json={json} node={node} />;
-    } else if (typeof json === "string") {
-        if (json?.startsWith("co_")) {
-            if (json.includes("_session_")) {
-                return (
-                    <>
-                        <AccountInfo accountID={json.split("_session_")[0] as AccountID} node={node}/>{" "}
-                        (sess {json.split("_session_")[1]})
-                    </>
-                );
-            } else {
-                return (
-                    <>
-                        <a className="underline" href={`#/${json}`}>
-                            {'"'}
-                            {json}
-                            {'"'}
-                        </a>
-                    </>
-                );
-            }
-        } else {
-            return <div className="truncate max-w-64 ml-1">{json}</div>;
-        }
-    } else {
-        return <div className="truncate max-w-64">{JSON.stringify(json)}</div>;
-    }
-}
-
-export function AccountInfo({ accountID, node }: { accountID: CoID<RawAccount>, node: LocalNode }) {
-    const [name, setName] = useState<string | null>(null);
-
-    useEffect(() => {
-        (async () => {
-            const account = await node.load(accountID);
-            if (account === "unavailable") return;
-            const profileID = account?.get("profile");
-            if (profileID === undefined) return;
-            const profile = await node.load(profileID as CoID<RawCoMap>);
-            if (profile === "unavailable") return;
-            setName(profile?.get("name") as string);
-        })()
-    }, [accountID, node]);
-
-    return name ? (
-            <Tag href={`#/${accountID}`} title={accountID}><h1>{name}</h1></Tag>
-    ) : (
-        <Tag href={`#/${accountID}`}>{accountID}</Tag>
-    );
-}
-
-export function Tag({
-    children,
-    href,
-    title
-}: {
-    children: React.ReactNode;
-    href?: string;
-    title?: string;
-}) {
-    if (href) {
-        return (
-            <a
-                href={href}
-                className="border text-xs px-2 py-0.5 rounded hover:underline"
-                title={title}
-            >
-                {children}
-            </a>
-        );
-    }
-    return (
-        <span className="border text-xs px-2 py-0.5 rounded">{children}</span>
-    );
-}

examples/inspector/src/index.css

@@ -3,76 +3,90 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 20 14.3% 4.1%;
 
-    --card: 0 0% 100%;
-    --card-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%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 20 14.3% 4.1%;
 
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
+        --primary: 24 9.8% 10%;
+        --primary-foreground: 60 9.1% 97.8%;
 
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
+        --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%;
+        --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%;
+        --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%;
+        --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%;
+        --border: 20 5.9% 90%;
+        --input: 20 5.9% 90%;
+        --ring: 20 14.3% 4.1%;
 
-    --radius: 0.5rem;
-  }
+        --radius: 0.5rem;
+    }
 
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
+    .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%;
+        --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%;
+        --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%;
+        --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%;
+        --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%;
+        --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%;
+        --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%;
+        --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%;
-  }
+        --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;
-  }
-}
+    * {
+        @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

@@ -1,18 +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>
-  );
+    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/CHANGELOG.md

@@ -1,5 +1,280 @@
 # jazz-example-pets
 
+## 0.0.100-unique.2
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.35-unique.2
+    -   jazz-browser-media-images@0.7.35-unique.2
+    -   jazz-react@0.7.35-unique.2
+
+## 0.0.100-new-auth.1
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.35-new-auth.1
+
+## 0.0.100-new-auth.0
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.35-new-auth.0
+    -   jazz-tools@0.7.35-new-auth.0
+    -   jazz-browser-media-images@0.7.35-new-auth.0
+
+## 0.0.99
+
+### Patch Changes
+
+-   jazz-react@0.7.34
+-   jazz-tools@0.7.34
+-   jazz-browser-media-images@0.7.34
+
+## 0.0.99-neverthrow.6
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.8
+-   jazz-tools@0.7.34-neverthrow.8
+-   jazz-browser-media-images@0.7.34-neverthrow.8
+
+## 0.0.99-neverthrow.5
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.7
+-   jazz-tools@0.7.34-neverthrow.7
+-   jazz-browser-media-images@0.7.34-neverthrow.7
+
+## 0.0.99-neverthrow.4
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.4
+-   jazz-tools@0.7.34-neverthrow.4
+-   jazz-browser-media-images@0.7.34-neverthrow.4
+
+## 0.0.99-neverthrow.3
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.3
+-   jazz-tools@0.7.34-neverthrow.3
+-   jazz-browser-media-images@0.7.34-neverthrow.3
+
+## 0.0.99-neverthrow.2
+
+### Patch Changes
+
+-   jazz-browser-media-images@0.7.34-neverthrow.2
+-   jazz-react@0.7.34-neverthrow.2
+
+## 0.0.99-neverthrow.1
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.1
+-   jazz-tools@0.7.34-neverthrow.1
+-   jazz-browser-media-images@0.7.34-neverthrow.1
+
+## 0.0.99-neverthrow.0
+
+### Patch Changes
+
+-   jazz-react@0.7.34-neverthrow.0
+-   jazz-tools@0.7.34-neverthrow.0
+-   jazz-browser-media-images@0.7.34-neverthrow.0
+
+## 0.0.98
+
+### Patch Changes
+
+-   jazz-react@0.7.33
+-   jazz-tools@0.7.33
+-   jazz-browser-media-images@0.7.33
+
+## 0.0.98-hotfixes.5
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.5
+-   jazz-tools@0.7.33-hotfixes.5
+-   jazz-browser-media-images@0.7.33-hotfixes.5
+
+## 0.0.98-hotfixes.4
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.4
+-   jazz-tools@0.7.33-hotfixes.4
+-   jazz-browser-media-images@0.7.33-hotfixes.4
+
+## 0.0.98-hotfixes.3
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.3
+-   jazz-tools@0.7.33-hotfixes.3
+-   jazz-browser-media-images@0.7.33-hotfixes.3
+
+## 0.0.98-hotfixes.2
+
+### Patch Changes
+
+-   jazz-browser-media-images@0.7.33-hotfixes.2
+-   jazz-react@0.7.33-hotfixes.2
+
+## 0.0.98-hotfixes.1
+
+### Patch Changes
+
+-   jazz-browser-media-images@0.7.33-hotfixes.1
+-   jazz-react@0.7.33-hotfixes.1
+
+## 0.0.98-hotfixes.0
+
+### Patch Changes
+
+-   jazz-react@0.7.33-hotfixes.0
+-   jazz-tools@0.7.33-hotfixes.0
+-   jazz-browser-media-images@0.7.33-hotfixes.0
+
+## 0.0.97
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.32
+    -   jazz-browser-media-images@0.7.32
+    -   jazz-react@0.7.32
+
+## 0.0.96
+
+### Patch Changes
+
+-   jazz-react@0.7.31
+-   jazz-tools@0.7.31
+-   jazz-browser-media-images@0.7.31
+
+## 0.0.95
+
+### Patch Changes
+
+-   jazz-browser-media-images@0.7.30
+-   jazz-react@0.7.30
+
+## 0.0.94
+
+### Patch Changes
+
+-   jazz-react@0.7.29
+-   jazz-tools@0.7.29
+-   jazz-browser-media-images@0.7.29
+
+## 0.0.93
+
+### Patch Changes
+
+-   jazz-react@0.7.28
+-   jazz-tools@0.7.28
+-   jazz-browser-media-images@0.7.28
+
+## 0.0.92
+
+### Patch Changes
+
+-   jazz-browser-media-images@0.7.27
+-   jazz-react@0.7.27
+
+## 0.0.91
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.26
+    -   jazz-tools@0.7.26
+    -   jazz-browser-media-images@0.7.26
+
+## 0.0.90
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.25
+    -   jazz-browser-media-images@0.7.25
+    -   jazz-react@0.7.25
+
+## 0.0.89
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.24
+    -   jazz-browser-media-images@0.7.24
+    -   jazz-react@0.7.24
+
+## 0.0.88
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.23
+    -   jazz-tools@0.7.23
+    -   jazz-browser-media-images@0.7.23
+
+## 0.0.87
+
+### Patch Changes
+
+-   jazz-browser-media-images@0.7.22
+-   jazz-react@0.7.22
+
+## 0.0.86
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.21
+    -   jazz-browser-media-images@0.7.21
+    -   jazz-react@0.7.21
+
+## 0.0.85
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.20
+    -   jazz-browser-media-images@0.7.20
+    -   jazz-react@0.7.20
+
+## 0.0.84
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.19
+    -   jazz-browser-media-images@0.7.19
+    -   jazz-react@0.7.19
+
+## 0.0.83
+
+### Patch Changes
+
+-   jazz-react@0.7.18
+-   jazz-tools@0.7.18
+-   jazz-browser-media-images@0.7.18
+
+## 0.0.82
+
+### Patch Changes
+
+-   jazz-react@0.7.17
+-   jazz-tools@0.7.17
+-   jazz-browser-media-images@0.7.17
+
 ## 0.0.81
 
 ### Patch Changes

examples/pets/package.json

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

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 loading={<div>Loading</div>}>
-                    <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,5 +1,247 @@
 # 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

examples/todo/package.json

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

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/layout.tsx

@@ -11,8 +11,8 @@ import { SiGithub, SiDiscord, SiTwitter } from "@icons-pack/react-simple-icons";
 import { Nav, NavLink, Newsletter, NewsletterButton } from "@/components/nav";
 import { DocNav } from "@/components/docs/nav";
 
-import { SpeedInsights } from "@vercel/speed-insights/next"
-import { Analytics } from "@vercel/analytics/react"
+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({
@@ -50,8 +50,8 @@ export default function RootLayout({
                     "flex flex-col items-center bg-stone-50 dark:bg-stone-950 overflow-x-hidden",
                 ].join(" ")}
             >
-                <SpeedInsights/>
-                <Analytics/>
+                <SpeedInsights />
+                <Analytics />
                 <ThemeProvider
                     attribute="class"
                     defaultTheme="system"
@@ -112,7 +112,7 @@ export default function RootLayout({
                             <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>

homepage/homepage/app/page.mdx

@@ -268,11 +268,7 @@ Jazz Mesh is currently free — 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/logos.tsx

@@ -83,4 +83,4 @@ export function GcmpLogo({
             </defs>
         </svg>
     );
-}
+}

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);
-        });
-    }
-}

oldExamples/counter-js-auth0/.gitignore

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

oldExamples/counter-js-auth0/CHANGELOG.md

@@ -1,10 +0,0 @@
-# counter-js-auth0
-
-## 0.0.47-alpha.0
-
-### Patch Changes
-
-- Updated dependencies
-  - jazz-browser@0.7.0-alpha.0
-  - cojson@0.7.0-alpha.0
-  - jazz-browser-auth0@0.6.3-alpha.0

oldExamples/counter-js-auth0/Dockerfile

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

oldExamples/counter-js-auth0/index.html

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz Counter Example (Auth0)</title>
-  </head>
-  <body>
-    <div id="root">
-      <div id="count">...initializing</div>
-      <button id="increment">Increment</button>
-      <button id="login">Login</button>
-    </div>
-    <script type="module" src="/index.ts"></script>
-  </body>
-</html>

oldExamples/counter-js-auth0/index.ts

@@ -1,113 +0,0 @@
-import * as auth0 from "@auth0/auth0-spa-js";
-import { Account, CoID, CoList, CoMap, Profile } from "cojson";
-import {
-    ResolvedAccount,
-    autoSub,
-    autoSubResolution,
-    createBrowserNode,
-} from "jazz-browser";
-import { BrowserAuth0 } from "jazz-browser-auth0";
-
-const auth0options = {
-    domain: "dev-12uyj8w4t4yjzkwa.us.auth0.com",
-    clientId: "TcYtq9an3PDyInQJvD1k8PtqupYG4PnA",
-};
-
-const authorizationParams = {
-    redirect_uri: window.location.origin,
-    audience: `https://${auth0options.domain}/api/v2/`,
-    scope: "read:current_user update:current_user_metadata",
-};
-
-window.onload = async () => {
-    const auth0Client = await auth0.createAuth0Client(auth0options);
-
-    const query = window.location.search;
-    if (query.includes("code=") && query.includes("state=")) {
-        await auth0Client.handleRedirectCallback();
-        window.history.replaceState({}, document.title, "/");
-    } else {
-        document
-            .getElementById("login")
-            ?.addEventListener("click", async () => {
-                await auth0Client.loginWithRedirect({
-                    authorizationParams,
-                });
-            });
-    }
-
-    if (!(await auth0Client.isAuthenticated())) {
-        return;
-    }
-
-    let accessToken: string | undefined;
-    try {
-        accessToken = await auth0Client.getTokenSilently({
-            authorizationParams,
-        });
-    } catch (e) {
-        alert(
-            "Failed to get access token silently, creating popup - this should only happen on localhost. Otherwise, check that allowed callback URLs are set correctly."
-        );
-        accessToken = await auth0Client.getTokenWithPopup({
-            authorizationParams,
-        });
-    }
-
-    if (!accessToken) {
-        throw new Error("No access token");
-    }
-
-    const { node, done } = await createBrowserNode({
-        auth: new BrowserAuth0(
-            {
-                domain: auth0options.domain,
-                clientID: auth0options.clientId,
-                accessToken,
-            },
-            auth0options.domain,
-            "jazz-browser-auth0-example"
-        ),
-        migration: (account) => {
-            if (!account.get("root")) {
-                account.set(
-                    "root",
-                    account.createMap({
-                        countIncrements: account.createList([]).id,
-                    }).id
-                );
-            }
-        },
-    });
-
-    autoSub<Account<Profile, CoMap<{ countIncrements: CoID<CoList<number>> }>>>(
-        "me",
-        node,
-        (me) => {
-            if (me?.root?.countIncrements) {
-                document.getElementById("count")!.innerText =
-                    me.root.countIncrements.reduce((sum, inc) => sum + inc, 0) +
-                    "";
-            }
-        }
-    );
-
-    const increments = await autoSubResolution(
-        "me",
-        (
-            me: ResolvedAccount<
-                Account<
-                    Profile,
-                    CoMap<{ countIncrements: CoID<CoList<number>> }>
-                >
-            >
-        ) => {
-            return me?.root?.countIncrements;
-        },
-        node
-    );
-
-    document.getElementById("increment")!.addEventListener("click", () => {
-        increments.append(1);
-    });
-};

oldExamples/counter-js-auth0/job-template.nomad

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

oldExamples/counter-js-auth0/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "counter-js-auth0",
-  "private": true,
-  "version": "0.0.47-alpha.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@auth0/auth0-spa-js": "^2.1.2",
-    "jazz-browser": "workspace:*",
-    "jazz-browser-auth0": "workspace:*",
-    "cojson": "workspace:*"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
-  }
-}

oldExamples/counter-js-auth0/tsconfig.json

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

oldExamples/counter-js-auth0/tsconfig.node.json

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

oldExamples/counter-js-auth0/vite.config.ts

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

oldExamples/file-drop/.eslintrc.cjs

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

oldExamples/file-drop/.gitignore

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

oldExamples/file-drop/CHANGELOG.md

@@ -1,18 +0,0 @@
-# jazz-example-file-drop
-
-## 0.0.64-alpha.0
-
-### Patch Changes
-
-- Updated dependencies
-  - jazz-browser@0.7.0-alpha.0
-  - 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

oldExamples/file-drop/Dockerfile

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

oldExamples/file-drop/README.md

@@ -1,42 +0,0 @@
-# Jazz File Drop Example
-
-Live version: https://example-file-drop.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/file-drop
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/file-drop # or any other directory
-tar -xf /tmp/jazz-example-file-drop-* --strip-components 1 -C ~/jazz-examples/file-drop
-cd ~/jazz-examples/file-drop
-```
-
-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`

oldExamples/file-drop/components.json

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

oldExamples/file-drop/index.html

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

oldExamples/file-drop/job-template.nomad

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

oldExamples/file-drop/package.json

@@ -1,47 +0,0 @@
-{
-  "name": "jazz-example-file-drop",
-  "private": true,
-  "version": "0.0.64-alpha.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite --port 6610",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.4",
-    "@types/qrcode": "^1.5.1",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "jazz-react": "workspace:*",
-    "jazz-browser": "workspace:*",
-    "cojson": "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",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7",
-    "uniqolor": "^1.1.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
-  }
-}

oldExamples/file-drop/postcss.config.js

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

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

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

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

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

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

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

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

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

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

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