Implement & test & sketch out further tests

Move to pnpm and turborepo (deploy)

.changeset/README.md

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

.changeset/calm-cameras-film.md

@@ -0,0 +1,6 @@
+---
+"jazz-browser": patch
+"cojson": patch
+---
+
+WIP working-ish version of LSM storage

.changeset/clean-ladybugs-decide.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Implement first devtools formatters

.changeset/clever-onions-call.md

@@ -0,0 +1,6 @@
+---
+"jazz-tools": patch
+"cojson": patch
+---
+
+Implement profile visibility based on groups & new migration signature

.changeset/config.json

@@ -0,0 +1,23 @@
+{
+    "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
+    "changelog": "@changesets/cli/changelog",
+    "commit": false,
+    "fixed": [],
+    "linked": [
+        [
+            "cojson",
+            "jazz-tools",
+            "jazz-browser",
+            "jazz-react",
+            "jazz-nodejs",
+            "jazz-run",
+            "cojson-transport-nodejs-ws",
+            "cojson-storage-indexeddb",
+            "cojson-storage-sqlite"
+        ]
+    ],
+    "access": "public",
+    "baseBranch": "main",
+    "updateInternalDependencies": "patch",
+    "ignore": []
+}

.changeset/curly-jars-crash.md

@@ -0,0 +1,8 @@
+---
+"jazz-browser-media-images": patch
+"jazz-browser": patch
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+CoMap fix

.changeset/early-zebras-collect.md

@@ -0,0 +1,5 @@
+---
+"jazz-react": patch
+---
+
+Use fresh subscribe context for useProgressiveImg

.changeset/empty-lamps-punch.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Add .all to CoStreamEntry

.changeset/friendly-jeans-deny.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Make Account -> Profile a lazy ref schema

.changeset/gentle-jeans-sell.md

@@ -0,0 +1,5 @@
+---
+"cojson": patch
+---
+
+CoJSON performance improvement

.changeset/happy-knives-pull.md

@@ -0,0 +1,5 @@
+---
+"hash-slash": patch
+---
+
+Allow fall-through of routes

.changeset/heavy-years-occur.md

@@ -0,0 +1,6 @@
+---
+"jazz-tools": patch
+"cojson": patch
+---
+
+Fix CoList.splice / RawCoList.append

.changeset/honest-sloths-taste.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+More precise imports from @effect/schema

.changeset/itchy-swans-sneeze.md

@@ -0,0 +1,5 @@
+---
+"jazz-react": patch
+---
+
+Fix Provider params

.changeset/khaki-dryers-worry.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+More superclass-compatible CoMaps

.changeset/large-rocks-worry.md

@@ -0,0 +1,6 @@
+---
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+Add maxWidth option for loading images

.changeset/late-socks-explain.md

@@ -0,0 +1,5 @@
+---
+"cojson": patch
+---
+
+Optimizations for incoming sync messages

.changeset/lazy-windows-fold.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Use effect 3.0

.changeset/lemon-trees-perform.md

@@ -0,0 +1,6 @@
+---
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+Fix image resolution loading

.changeset/long-ties-relax.md

@@ -0,0 +1,10 @@
+---
+"jazz-browser-media-images": minor
+"jazz-browser": minor
+"hash-slash": minor
+"jazz-react": minor
+"jazz-tools": minor
+"cojson": minor
+---
+
+New simplified API

.changeset/lovely-carpets-draw.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Fix CoMap \_refs for co.items

.changeset/mean-panthers-look.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+CoValue casting & auto-subbing \_owner

.changeset/mighty-jars-leave.md

@@ -0,0 +1,5 @@
+---
+"jazz-nodejs": patch
+---
+
+Simplify jazz-nodejs

.changeset/odd-beans-jam.md

@@ -0,0 +1,13 @@
+---
+"cojson-transport-nodejs-ws": patch
+"jazz-browser-media-images": patch
+"cojson-storage-indexeddb": patch
+"cojson-storage-sqlite": patch
+"jazz-browser": patch
+"jazz-nodejs": patch
+"jazz-react": patch
+"jazz-tools": patch
+"cojson": patch
+---
+
+Support stricter TS lint rules

.changeset/orange-pigs-clean.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Relax types of CoMap.\_schema

.changeset/popular-tips-appear.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Make CoMaps even more subclassable

.changeset/pre.json

@@ -0,0 +1,80 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "jazz-example-chat": "0.0.46",
+    "jazz-example-chat-passphrase": "0.0.47",
+    "counter-js-auth0": "0.0.46",
+    "jazz-example-file-drop": "0.0.63",
+    "jazz-example-pets": "0.0.64",
+    "jazz-example-todo": "0.0.63",
+    "jazz-example-twit": "0.1.1",
+    "twit-stresstest": "0.2.0",
+    "cojson": "0.6.6",
+    "cojson-simple-sync": "0.6.0",
+    "cojson-storage-indexeddb": "0.6.3",
+    "cojson-storage-sqlite": "0.5.2",
+    "cojson-transport-nodejs-ws": "0.5.1",
+    "hash-slash": "0.1.3",
+    "jazz-browser": "0.6.3",
+    "jazz-browser-auth0": "0.6.2",
+    "jazz-browser-media-images": "0.6.0",
+    "jazz-tools": "0.6.1",
+    "jazz-nodejs": "0.6.4",
+    "jazz-react": "0.5.4",
+    "jazz-run": "0.7.0-alpha.32"
+  },
+  "changesets": [
+    "calm-cameras-film",
+    "clean-ladybugs-decide",
+    "clever-onions-call",
+    "curly-jars-crash",
+    "early-zebras-collect",
+    "empty-lamps-punch",
+    "friendly-jeans-deny",
+    "gentle-jeans-sell",
+    "happy-knives-pull",
+    "heavy-years-occur",
+    "honest-sloths-taste",
+    "itchy-swans-sneeze",
+    "khaki-dryers-worry",
+    "large-rocks-worry",
+    "late-socks-explain",
+    "lazy-windows-fold",
+    "lemon-trees-perform",
+    "long-ties-relax",
+    "lovely-carpets-draw",
+    "mean-panthers-look",
+    "mighty-jars-leave",
+    "odd-beans-jam",
+    "orange-pigs-clean",
+    "popular-tips-appear",
+    "pretty-shirts-applaud",
+    "purple-jars-change",
+    "real-actors-jam",
+    "rotten-crabs-invite",
+    "selfish-bobcats-fetch",
+    "serious-buses-sniff",
+    "serious-donuts-end",
+    "seven-rivers-divide",
+    "shy-flies-fold",
+    "silent-berries-complain",
+    "silly-oranges-look",
+    "slow-beans-stare",
+    "smart-guests-work",
+    "smooth-emus-hunt",
+    "tame-bikes-poke",
+    "tasty-boats-watch",
+    "thin-bulldogs-leave",
+    "thin-knives-fail",
+    "thin-rice-know",
+    "thirty-tools-matter",
+    "three-berries-study",
+    "three-months-carry",
+    "tough-waves-shave",
+    "wet-schools-travel",
+    "wicked-adults-visit",
+    "wise-geckos-buy",
+    "witty-cougars-swim"
+  ]
+}

.changeset/pretty-shirts-applaud.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Make refs type more precise

.changeset/purple-jars-change.md

@@ -0,0 +1,5 @@
+---
+"jazz-browser": patch
+---
+
+Add missing @scure/bip39 dep

.changeset/real-actors-jam.md

@@ -0,0 +1,10 @@
+---
+"jazz-browser-media-images": patch
+"cojson-storage-indexeddb": patch
+"jazz-browser": patch
+"jazz-react": patch
+"jazz-tools": patch
+"cojson": patch
+---
+
+Consistent proxy based API

.changeset/rotten-crabs-invite.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Add ability to declare minimum required data in subscribe & Improve property access tracing

.changeset/selfish-bobcats-fetch.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Fix CoMap.Record.toJSON()

.changeset/serious-buses-sniff.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Introduce jazz-tools CLI

.changeset/serious-donuts-end.md

@@ -0,0 +1,9 @@
+---
+"cojson-transport-nodejs-ws": patch
+"cojson-storage-indexeddb": patch
+"cojson-storage-sqlite": patch
+"jazz-tools": patch
+"cojson": patch
+---
+
+Reintroduce changes from main

.changeset/seven-rivers-divide.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Get rid of self generics, new create syntax

.changeset/shy-flies-fold.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Fix schema of Account & Group

.changeset/silent-berries-complain.md

@@ -0,0 +1,5 @@
+---
+"jazz-run": patch
+---
+
+Ensure accounts are synced after creation

.changeset/silly-oranges-look.md

@@ -0,0 +1,9 @@
+---
+"jazz-browser-media-images": patch
+"jazz-browser": patch
+"jazz-nodejs": patch
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+Fix variance of ID.\_\_type

.changeset/slow-beans-stare.md

@@ -0,0 +1,8 @@
+---
+"jazz-browser-media-images": patch
+"jazz-browser": patch
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+Even friendlier for subclassing CoMap

.changeset/smart-guests-work.md

@@ -0,0 +1,5 @@
+---
+"jazz-react": patch
+---
+
+Fix subscription to account in useAccount

.changeset/smooth-emus-hunt.md

@@ -0,0 +1,7 @@
+---
+"jazz-browser": patch
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+Clean up exports

.changeset/tame-bikes-poke.md

@@ -0,0 +1,13 @@
+---
+"jazz-browser-media-images": patch
+"cojson-storage-indexeddb": patch
+"cojson-storage-sqlite": patch
+"cojson-simple-sync": patch
+"jazz-browser": patch
+"hash-slash": patch
+"jazz-react": patch
+"jazz-tools": patch
+"cojson": patch
+---
+
+Use effect schema much less

.changeset/tasty-boats-watch.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Fix CoStream types

.changeset/thin-bulldogs-leave.md

@@ -0,0 +1,13 @@
+---
+"cojson-transport-nodejs-ws": patch
+"jazz-browser-media-images": patch
+"cojson-storage-indexeddb": patch
+"cojson-storage-sqlite": patch
+"jazz-browser": patch
+"jazz-nodejs": patch
+"jazz-react": patch
+"jazz-tools": patch
+"cojson": patch
+---
+
+Clean up API more & re-add jazz-nodejs

.changeset/thin-knives-fail.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Make refs on list more precise

.changeset/thin-rice-know.md

@@ -0,0 +1,10 @@
+---
+"jazz-browser-media-images": patch
+"cojson-storage-indexeddb": patch
+"jazz-browser": patch
+"jazz-react": patch
+"jazz-tools": patch
+"cojson": patch
+---
+
+Refactoring

.changeset/thirty-tools-matter.md

@@ -0,0 +1,11 @@
+---
+"cojson-transport-nodejs-ws": patch
+"jazz-browser-media-images": patch
+"cojson-storage-indexeddb": patch
+"jazz-browser": patch
+"hash-slash": patch
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+Get rid of Co namespace

.changeset/three-berries-study.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Cache CoValue proxies

.changeset/three-months-carry.md

@@ -0,0 +1,6 @@
+---
+"jazz-tools": patch
+"cojson": patch
+---
+
+Make sure delete on CoMaps deletes keys

.changeset/tough-waves-shave.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Make fast-check a direct dependency to help dev time resolution

.changeset/wet-schools-travel.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+CoMap fixes and improvements

.changeset/wicked-adults-visit.md

@@ -0,0 +1,8 @@
+---
+"jazz-browser-media-images": patch
+"jazz-browser": patch
+"jazz-react": patch
+"jazz-tools": patch
+---
+
+More subclass-friendly types in CoMap

.changeset/wise-geckos-buy.md

@@ -0,0 +1,6 @@
+---
+"jazz-tools": patch
+"jazz-run": patch
+---
+
+Extract jazz cli into jazz-run package

.changeset/witty-cougars-swim.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Fix Costream[...].all

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

@@ -7,22 +7,26 @@ on:
     branches: [ "main" ]
 
 jobs:
-  build:
+  build-examples:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        example: ["todo", "pets"]
+        example: ["chat", "pets", "todo"]
+        # example: ["twit", "chat", "counter-js-auth0", "pets", "twit", "file-drop", "inspector"]
 
     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: 'yarn'
-        cache-dependency-path: yarn.lock
+        cache: 'pnpm'
 
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v2
@@ -34,14 +38,10 @@ jobs:
         username: gardencmp
         password: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Nuke Workspace
+    - name: Pnpm Build
       run: |
-        rm package.json yarn.lock;
-
-    - name: Yarn Build
-      run: |
-        yarn install --frozen-lockfile;
-        yarn build;
+        pnpm install
+        pnpm turbo build;
       working-directory: ./examples/${{ matrix.example }}
 
     - name: Docker Build & Push
@@ -53,12 +53,40 @@ jobs:
         cache-from: type=gha
         cache-to: type=gha,mode=max
 
-  deploy:
+  build-homepage:
     runs-on: ubuntu-latest
-    needs: build
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v2
+      with:
+        registry: ghcr.io
+        username: gardencmp
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Docker Build & Push
+      uses: docker/build-push-action@v4
+      with:
+        context: ./homepage
+        push: true
+        tags: ghcr.io/gardencmp/${{github.event.repository.name}}-homepage-jazz:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+
+  deploy-examples:
+    runs-on: ubuntu-latest
+    needs: build-examples
     strategy:
       matrix:
-        example: ["todo", "pets"]
+        example: ["chat", "pets", "todo"]
+        # example: ["twit", "chat", "counter-js-auth0", "pets", "twit", "file-drop", "inspector"]
 
     steps:
     - uses: actions/checkout@v3
@@ -86,5 +114,38 @@ jobs:
 
         envsubst '${DOCKER_USER} ${DOCKER_PASSWORD} ${DOCKER_TAG} ${BRANCH_SUFFIX} ${BRANCH_SUBDOMAIN}' < job-template.nomad > job-instance.nomad;
         cat job-instance.nomad;
-        NOMAD_ADDR='http://control1v2-london:4646' nomad job run job-instance.nomad;
-      working-directory: ./examples/${{ matrix.example }}
+        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

.gitignore

@@ -1,4 +1,6 @@
 node_modules
 yarn-error.log
 lerna-debug.log
-docsTmp
+docsTmp
+.DS_Store
+.turbo

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "typescript.tsdk": "node_modules/typescript/lib"
-}

README.md

@@ -23,7 +23,7 @@ Quickly build and ship apps with:
 
 - **Set fine-grained, role-based permissions in `Group`s** that are **synced along with your data**.
 - **Permissions *verifiably enforced* everywhere,** using encryption & signatures under the hood.
-- **Change roles dynamically** for evolving teams, expiring invite links and more.
+- **Change roles dynamically** for evolving teams, expiring Invite Links and more.
 
 # What's special about Jazz?
 
@@ -56,19 +56,19 @@ Jazz is open source and you can run your own sync & storage server, but to reall
 
 ### Building a new, entirely sync-based React app
 
-1. Define your data model with [cojson Collaborative Values (CoValues)](./DOCS.md/#covalue).
-2. Implement permission logic using [cojson Groups](./DOCS.md/#group).
-3. Build a user interface with [jazz-react](./DOCS.md/#jazz-react)'s reactive [synced queries](./DOCS.md/#usesyncedqueryid).
+1. Define your data model with [cojson Collaborative Values (CoValues)](./DOCS.md#covalue).
+2. Implement permission logic using [cojson Groups](./DOCS.md#group).
+3. Build a user interface with [jazz-react](./DOCS.md#jazz-react) and [auto-sub](./DOCS.md#useautosubid).
 
 ### Gradually adding sync to an existing React app
 
 Gradually migrate app features to use sync:
 
-1. Define data model for small aspect of your app with [cojson Collaborative Values (CoValues)](./DOCS.md/#covalue).
+1. Define data model for small aspect of your app with [cojson Collaborative Values (CoValues)](./DOCS.md#covalue).
     - Schema adapters/importers for Prisma/Drizzle/PostgreSQL introspection coming soon.
-2. Map existing permission logic with [cojson Groups](./DOCS.md/#group) & integrate existing auth.
+2. Map existing permission logic with [cojson Groups](./DOCS.md#group) & integrate existing auth.
     - Auth integrations coming soon.
-3. Replace some of the React state and API requests in your UI with [jazz-react](./DOCS.md/#jazz-react)'s reactive [synced queries](./DOCS.md/#usesyncedqueryid).
+3. Replace some of the React state and API requests in your UI with [jazz-react](./DOCS.md#jazz-react) and [auto-sub](./DOCS.md#useautosubid).
 
 # Example Apps
 
@@ -103,10 +103,10 @@ Demonstrates:
 
 For now, docs are hosted in a single well-structured markdown file: [`./DOCS.md`](./DOCS.md).
 
-- [Package Overview](./DOCS.md/#overview)
-- [`jazz-react` API](./DOCS.md/#jazz-react)
-- [`cojson` API](./DOCS.md/#cojson)
-- [`jazz-react-media-images` API](./DOCS.md/#jazz-react-media-images)
+- [Package Overview](./DOCS.md#overview)
+- [`jazz-react` API](./DOCS.md#jazz-react)
+- [`cojson` API](./DOCS.md#cojson)
+- [`jazz-browser-media-images` API](./DOCS.md#jazz-browser-media-images)
 
 
 In the future we'll build a dedicated docs page on the Jazz homepage.

examples/chat/.eslintrc.cjs

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

examples/chat/.gitignore

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

examples/chat/CHANGELOG.md

@@ -0,0 +1,330 @@
+# jazz-example-chat
+
+## 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/Dockerfile

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

examples/chat/README.md

@@ -0,0 +1,42 @@
+# Jazz Chat Example
+
+Live version: https://example-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
+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 `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/chat/index.html

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

examples/chat/job-template.nomad

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

examples/chat/package.json

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

examples/chat/postcss.config.js

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

examples/chat/src/app.tsx

@@ -0,0 +1,42 @@
+import { CoMap, CoList, co, Group, ID } from "jazz-tools";
+import { createJazzReactContext, DemoAuth } from "jazz-react";
+import { createRoot } from "react-dom/client";
+import { useIframeHashRouter } from "hash-slash";
+import { ChatScreen } from "./chatScreen.tsx";
+
+export class Message extends CoMap {
+  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`
+});
+export const { useAccount, useCoState } = Jazz;
+
+
+function App() {
+  const { me, logOut } = useAccount();
+
+  const createChat = () => {
+    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>;
+}
+
+createRoot(document.getElementById("root")!)
+  .render(<Jazz.Provider><App/></Jazz.Provider>);

examples/chat/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) => 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/src/index.css

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

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

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

examples/chat/tailwind.config.js

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

examples/chat/tsconfig.json

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

examples/chat/tsconfig.node.json

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

examples/chat/vite.config.ts

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

examples/pets/CHANGELOG.md

@@ -0,0 +1,354 @@
+# jazz-example-pets
+
+## 0.0.65-alpha.36
+
+### Patch Changes
+
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [6b0418f]
+- Updated dependencies [1a35307]
+  - jazz-tools@0.7.0-alpha.36
+  - jazz-react@0.7.0-alpha.36
+  - jazz-browser-media-images@0.7.0-alpha.35
+
+## 0.0.65-alpha.35
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.35
+  - jazz-react@0.7.0-alpha.35
+  - jazz-browser-media-images@0.7.0-alpha.34
+
+## 0.0.65-alpha.34
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.34
+  - jazz-browser-media-images@0.7.0-alpha.33
+  - jazz-react@0.7.0-alpha.34
+
+## 0.0.65-alpha.33
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.33
+
+## 0.0.65-alpha.32
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.32
+  - jazz-react@0.7.0-alpha.32
+  - jazz-browser-media-images@0.7.0-alpha.32
+
+## 0.0.65-alpha.31
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.31
+  - jazz-browser-media-images@0.7.0-alpha.31
+  - jazz-react@0.7.0-alpha.31
+
+## 0.0.65-alpha.30
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.30
+  - jazz-browser-media-images@0.7.0-alpha.30
+  - jazz-react@0.7.0-alpha.30
+
+## 0.0.65-alpha.29
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.29
+  - jazz-browser-media-images@0.7.0-alpha.29
+  - jazz-react@0.7.0-alpha.29
+
+## 0.0.65-alpha.28
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.28
+  - jazz-browser-media-images@0.7.0-alpha.28
+  - jazz-react@0.7.0-alpha.28
+
+## 0.0.65-alpha.27
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.27
+  - jazz-browser-media-images@0.7.0-alpha.27
+  - jazz-react@0.7.0-alpha.27
+
+## 0.0.65-alpha.26
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.26
+  - jazz-browser-media-images@0.7.0-alpha.26
+  - jazz-react@0.7.0-alpha.26
+
+## 0.0.65-alpha.25
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.25
+  - jazz-browser-media-images@0.7.0-alpha.25
+  - jazz-react@0.7.0-alpha.25
+
+## 0.0.65-alpha.24
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.24
+  - jazz-browser-media-images@0.7.0-alpha.24
+  - jazz-react@0.7.0-alpha.24
+
+## 0.0.65-alpha.23
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.23
+  - jazz-browser-media-images@0.7.0-alpha.23
+  - jazz-react@0.7.0-alpha.23
+
+## 0.0.65-alpha.22
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.22
+  - jazz-browser-media-images@0.7.0-alpha.22
+  - jazz-react@0.7.0-alpha.22
+
+## 0.0.65-alpha.21
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.21
+  - jazz-tools@0.7.0-alpha.21
+  - jazz-browser-media-images@0.7.0-alpha.21
+
+## 0.0.65-alpha.20
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.20
+  - jazz-tools@0.7.0-alpha.20
+  - jazz-browser-media-images@0.7.0-alpha.20
+
+## 0.0.65-alpha.19
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.19
+  - jazz-browser-media-images@0.7.0-alpha.19
+  - jazz-react@0.7.0-alpha.19
+
+## 0.0.65-alpha.18
+
+### Patch Changes
+
+- jazz-browser-media-images@0.7.0-alpha.18
+- jazz-react@0.7.0-alpha.18
+
+## 0.0.65-alpha.17
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.17
+  - jazz-browser-media-images@0.7.0-alpha.17
+  - jazz-react@0.7.0-alpha.17
+
+## 0.0.65-alpha.16
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.16
+  - jazz-browser-media-images@0.7.0-alpha.16
+  - jazz-react@0.7.0-alpha.16
+
+## 0.0.65-alpha.15
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.15
+  - jazz-browser-media-images@0.7.0-alpha.15
+  - jazz-react@0.7.0-alpha.15
+
+## 0.0.65-alpha.14
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.14
+  - jazz-browser-media-images@0.7.0-alpha.14
+  - jazz-react@0.7.0-alpha.14
+
+## 0.0.65-alpha.13
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.13
+  - jazz-browser-media-images@0.7.0-alpha.13
+  - jazz-react@0.7.0-alpha.13
+
+## 0.0.65-alpha.12
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.12
+  - jazz-react@0.7.0-alpha.12
+  - jazz-tools@0.7.0-alpha.12
+
+## 0.0.65-alpha.11
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.11
+  - jazz-react@0.7.0-alpha.11
+  - jazz-tools@0.7.0-alpha.11
+
+## 0.0.65-alpha.10
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.10
+  - jazz-react@0.7.0-alpha.10
+  - jazz-tools@0.7.0-alpha.10
+
+## 0.0.65-alpha.9
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.9
+  - jazz-react@0.7.0-alpha.9
+  - jazz-tools@0.7.0-alpha.9
+
+## 0.0.65-alpha.8
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.8
+  - jazz-react@0.7.0-alpha.8
+  - jazz-tools@0.7.0-alpha.8
+
+## 0.0.65-alpha.7
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.7
+  - jazz-react@0.7.0-alpha.7
+  - jazz-tools@0.7.0-alpha.7
+
+## 0.0.65-alpha.6
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.6
+  - jazz-react@0.7.0-alpha.6
+  - jazz-tools@0.7.0-alpha.6
+
+## 0.0.65-alpha.5
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.5
+  - jazz-react@0.7.0-alpha.5
+  - jazz-tools@0.7.0-alpha.5
+
+## 0.0.65-alpha.4
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.4
+  - jazz-browser-media-images@0.7.0-alpha.4
+  - jazz-react@0.7.0-alpha.4
+
+## 0.0.65-alpha.3
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.3
+  - jazz-browser-media-images@0.7.0-alpha.3
+  - jazz-react@0.7.0-alpha.3
+
+## 0.0.65-alpha.2
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.2
+  - jazz-react@0.7.0-alpha.2
+  - jazz-tools@0.7.0-alpha.2
+
+## 0.0.65-alpha.1
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.1
+  - jazz-react@0.7.0-alpha.1
+  - jazz-tools@0.7.0-alpha.1
+
+## 0.0.65-alpha.0
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.7.0-alpha.0
+  - jazz-react@0.7.0-alpha.0
+  - jazz-tools@0.7.0-alpha.0
+
+## 0.0.64
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.6.0
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-browser-media-images@0.5.0
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/pets/README.md

@@ -4,41 +4,32 @@ Live version: https://example-pets.jazz.tools
 
 ## Installing & running the example locally
 
-Start by checking out just the example app to a folder:
+(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
+Start by checking out `jazz`
 ```bash
-npx degit gardencmp/jazz/examples/pets jazz-example-pets
-cd jazz-example-pets
+git clone https://github.com/gardencmp/jazz.git
+cd jazz/examples/pets
+pnpm pack --pack-destination /tmp
+mkdir -p ~/jazz-examples/pets # or any other directory
+tar -xf /tmp/jazz-example-pets-* --strip-components 1 -C ~/jazz-examples/pets
+cd ~/jazz-examples/pets
 ```
 
-(This ensures that you have the example app without git history or our multi-package monorepo)
+This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
 
 Install dependencies:
 
 ```bash
-npm install
+pnpm install
 ```
 
 Start the dev server:
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
-## Structure
-
-TODO
-
-## Walkthrough
-
-### Main parts
-
-TODO
-
-### Helpers
-
-TODO
-
 ## 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.
@@ -48,4 +39,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<WithJazz>` provider component in [./src/0_main.tsx](./src/0_main.tsx).
+You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/pets/job-template.nomad

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

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.14",
+  "version": "0.0.65-alpha.36",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,9 +16,9 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "^0.3.5",
-    "jazz-react-auth-local": "^0.3.5",
-    "jazz-react-media-images": "^0.3.5",
+    "jazz-browser-media-images": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/pets/src/1_schema.ts

@@ -0,0 +1,60 @@
+import {
+    Account,
+    CoList,
+    CoMap,
+    CoStream,
+    ImageDefinition,
+    Profile,
+    co,
+} from "jazz-tools";
+
+/** Walkthrough: Defining the data model with CoJSON
+ *
+ *  Here, we define our main data model of TODO
+ *
+ *  TODO
+ **/
+
+export const ReactionTypes = [
+    "aww",
+    "love",
+    "haha",
+    "wow",
+    "tiny",
+    "chonkers",
+] as const;
+export type ReactionType = (typeof ReactionTypes)[number];
+
+export class PetReactions extends CoStream.Of(co.json<ReactionType>()) {}
+
+export class PetPost extends CoMap {
+    name = co.string;
+    image = co.ref(ImageDefinition);
+    reactions = co.ref(PetReactions);
+}
+
+export class ListOfPosts extends CoList.Of(co.ref(PetPost)) {}
+
+export class PetAccountRoot extends CoMap {
+    posts = co.ref(ListOfPosts);
+}
+
+export class PetAccount extends Account {
+    profile = co.ref(Profile);
+    root = co.ref(PetAccountRoot);
+
+    migrate(creationProps?: { name: string }) {
+        super.migrate(creationProps);
+        if (!this._refs.root) {
+            this.root = PetAccountRoot.create(
+                {
+                    posts: ListOfPosts.create([], { owner: this }),
+                },
+                { owner: this }
+            );
+            console.log("Created root", this.root);
+        }
+    }
+}
+
+/** Walkthrough: Continue with ./2_App.tsx */

examples/pets/src/1_types.ts

@@ -1,29 +0,0 @@
-import { CoMap, CoStream, Media } from "cojson";
-
-/** Walkthrough: Defining the data model with CoJSON
- *
- *  Here, we define our main data model of TODO
- *
- *  TODO
- **/
-
-export type PetPost = CoMap<{
-    name: string;
-    image: Media.ImageDefinition;
-    reactions: PetReactions;
-}>;
-
-export const REACTION_TYPES = [
-    "aww",
-    "love",
-    "haha",
-    "wow",
-    "tiny",
-    "chonkers",
-] as const;
-
-export type ReactionType = (typeof REACTION_TYPES)[number];
-
-export type PetReactions = CoStream<ReactionType>;
-
-/** Walkthrough: Continue with ./2_App.tsx */

examples/pets/src/2_main.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { RouterProvider, createHashRouter } from "react-router-dom";
+import { Link, RouterProvider, createHashRouter } from "react-router-dom";
 import "./index.css";
 
-import { WithJazz, useJazz, useAcceptInvite } from "jazz-react";
-import { LocalAuth } from "jazz-react-auth-local";
+import { createJazzReactContext, PasskeyAuth } from "jazz-react";
 
 import {
     Button,
@@ -14,6 +13,7 @@ import {
 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";
 
 /** Walkthrough: The top-level provider `<WithJazz/>`
  *
@@ -24,16 +24,28 @@ import { RatePetPostUI } from "./4_RatePetPostUI.tsx";
 
 const appName = "Jazz Rate My Pet Example";
 
-const auth = LocalAuth({
+const auth = PasskeyAuth<PetAccount>({
     appName,
     Component: PrettyAuthUI,
+    accountSchema: PetAccount,
 });
 
+const Jazz = createJazzReactContext({
+    auth,
+    peer: "wss://mesh.jazz.tools/?key=you@example.com",
+});
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <WithJazz auth={auth}>
-            <App />
-        </WithJazz>
+        <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>
+            </div>
+        </ThemeProvider>
     </React.StrictMode>
 );
 
@@ -45,11 +57,15 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
  */
 
 export default function App() {
-    const { logOut } = useJazz();
+    const { logOut } = useAccount();
 
     const router = createHashRouter([
         {
             path: "/",
+            element: <PostOverview />,
+        },
+        {
+            path: "/new",
             element: <NewPetPostForm />,
         },
         {
@@ -62,25 +78,46 @@ export default function App() {
         },
     ]);
 
-    useAcceptInvite((petPostID) => router.navigate("/pet/" + petPostID));
+    useAcceptInvite({
+        invitedObjectSchema: PetPost,
+        onAccept: (petPostID) => router.navigate("/pet/" + petPostID),
+    });
 
     return (
-        <ThemeProvider>
-            <TitleAndLogo name={appName} />
-            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-                <RouterProvider router={router} />
+        <>
+            <RouterProvider router={router} />
 
-                <Button
-                    onClick={() => router.navigate("/").then(logOut)}
-                    variant="outline"
-                >
-                    Log Out
-                </Button>
-            </div>
-        </ThemeProvider>
+            <Button
+                onClick={() => router.navigate("/").then(logOut)}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </>
     );
 }
 
-/** Walkthrough: continue with ./3_CreatePetPostForm.tsx */
+export function PostOverview() {
+    const { me } = useAccount();
 
-/** Walkthrough: Continue with ./1_types.ts */
+    const myPosts = me.root?.posts;
+
+    return (
+        <>
+            {myPosts?.length ? (
+                <>
+                    <h1>My posts</h1>
+                    {myPosts.map(
+                        (post) =>
+                            post && (
+                                <Link key={post.id} to={"/pet/" + post.id}>
+                                    {post.name}
+                                </Link>
+                            )
+                    )}
+                </>
+            ) : undefined}
+            <Link to="/new">New post</Link>
+        </>
+    );
+}

examples/pets/src/3_NewPetPostForm.tsx

@@ -1,66 +1,77 @@
 import { ChangeEvent, useCallback, useState } from "react";
 import { useNavigate } from "react-router";
-
-import { CoID, CoMap, Media } from "cojson";
-import { useJazz, useSyncedQuery } from "jazz-react";
 import { createImage } from "jazz-browser-media-images";
 
-import { PetReactions } from "./1_types";
-
+import { PetPost, PetReactions } from "./1_schema";
 import { Input, Button } from "./basicComponents";
-import { useLoadImage } from "jazz-react-media-images";
+import { useAccount, useCoState } from "./2_main";
+import { CoMap, Group, ID, ImageDefinition, co } from "jazz-tools";
+import { ProgressiveImg } from "jazz-react";
 
 /** Walkthrough: TODO
  */
 
-type PartialPetPost = CoMap<{
-    name: string;
-    image?: Media.ImageDefinition;
-    reactions: PetReactions;
-}>;
+class PartialPetPost extends CoMap {
+    name = co.string;
+    image? = co.ref(ImageDefinition);
+    reactions = co.ref(PetReactions);
+}
 
 export function NewPetPostForm() {
-    const { localNode } = useJazz();
+    const { me } = useAccount();
     const navigate = useNavigate();
 
-    const [newPostId, setNewPostId] = useState<
-        CoID<PartialPetPost> | undefined
-    >(undefined);
+    const [newPostId, setNewPostId] = useState<ID<PartialPetPost> | undefined>(
+        undefined
+    );
 
-    const newPetPost = useSyncedQuery(newPostId);
+    const newPetPost = useCoState(PartialPetPost, newPostId);
 
     const onChangeName = useCallback(
         (name: string) => {
             if (newPetPost) {
-                newPetPost.set({ name });
+                newPetPost.name = name;
             } else {
-                const petPostGroup = localNode.createGroup();
-                const petPost = petPostGroup.createMap<PartialPetPost>({
-                    name,
-                    reactions: petPostGroup.createStream<PetReactions>(),
-                });
+                const petPostGroup = Group.create({ owner: me });
+                const petPost = PartialPetPost.create(
+                    {
+                        name,
+                        reactions: PetReactions.create([], { owner: me }),
+                    },
+                    { owner: petPostGroup }
+                );
 
                 setNewPostId(petPost.id);
             }
         },
-        [localNode, newPetPost]
+        [me, newPetPost]
     );
 
     const onImageSelected = useCallback(
         async (event: ChangeEvent<HTMLInputElement>) => {
             if (!newPetPost || !event.target.files) return;
 
-            const image = await createImage(
-                event.target.files[0],
-                newPetPost.group
-            );
+            const image = await createImage(event.target.files[0], {
+                owner: newPetPost._owner,
+            });
 
-            newPetPost.set({ image });
+            newPetPost.image = image;
         },
         [newPetPost]
     );
 
-    const petImage = useLoadImage(newPetPost?.image?.id);
+    const onSubmit = useCallback(() => {
+        if (!newPetPost) return;
+        const myPosts = me.root?.posts;
+
+        if (!myPosts) {
+            throw new Error("No posts list found");
+        }
+
+        myPosts.push(newPetPost as PetPost);
+
+        navigate("/pet/" + newPetPost.id);
+    }, [me.root?.posts, newPetPost, navigate]);
 
     return (
         <div className="flex flex-col gap-10">
@@ -73,11 +84,12 @@ export function NewPetPostForm() {
                 value={newPetPost?.name || ""}
             />
 
-            {petImage ? (
-                <img
-                    className="w-80 max-w-full rounded"
-                    src={petImage.highestResSrc || petImage.placeholderDataURL}
-                />
+            {newPetPost?.image ? (
+                <ProgressiveImg image={newPetPost.image}>
+                    {({ src }) => (
+                        <img className="w-80 max-w-full rounded" src={src} />
+                    )}
+                </ProgressiveImg>
             ) : (
                 <Input
                     type="file"
@@ -87,13 +99,7 @@ export function NewPetPostForm() {
             )}
 
             {newPetPost?.name && newPetPost?.image && (
-                <Button
-                    onClick={() => {
-                        navigate("/pet/" + newPetPost.id);
-                    }}
-                >
-                    Submit Post
-                </Button>
+                <Button onClick={onSubmit}>Submit Post</Button>
             )}
         </div>
     );

examples/pets/src/4_RatePetPostUI.tsx

@@ -1,18 +1,20 @@
 import { useParams } from "react-router";
-import { CoID, Queried } from "cojson";
-import { useSyncedQuery } from "jazz-react";
 
-import { PetPost, ReactionType, REACTION_TYPES, PetReactions } from "./1_types";
+import { PetPost, PetReactions, ReactionTypes } from "./1_schema";
 
 import { ShareButton } from "./components/ShareButton";
 import { Button, Skeleton } from "./basicComponents";
-import { useLoadImage } from "jazz-react-media-images";
 import uniqolor from "uniqolor";
+import { ID } from "jazz-tools";
+import { useCoState } from "./2_main";
+import { ProgressiveImg } from "jazz-react";
 
 /** Walkthrough: TODO
  */
 
-const reactionEmojiMap: { [reaction in ReactionType]: string } = {
+const reactionEmojiMap: {
+    [reaction in typeof ReactionTypes[number]]: string;
+} = {
     aww: "😍",
     love: "❤️",
     haha: "😂",
@@ -22,10 +24,9 @@ const reactionEmojiMap: { [reaction in ReactionType]: string } = {
 };
 
 export function RatePetPostUI() {
-    const petPostID = useParams<{ petPostId: CoID<PetPost> }>().petPostId;
+    const petPostID = useParams<{ petPostId: ID<PetPost> }>().petPostId;
 
-    const petPost = useSyncedQuery(petPostID);
-    const petImage = useLoadImage(petPost?.image);
+    const petPost = useCoState(PetPost, petPostID);
 
     return (
         <div className="flex flex-col gap-8">
@@ -34,19 +35,18 @@ export function RatePetPostUI() {
                 <ShareButton petPost={petPost} />
             </div>
 
-            {petImage && (
-                <img
-                    className="w-80 max-w-full rounded"
-                    src={petImage.highestResSrc || petImage.placeholderDataURL}
-                />
-            )}
+            <ProgressiveImg image={petPost?.image}>
+                {({ src }) => (
+                    <img className="w-80 max-w-full rounded" src={src} />
+                )}
+            </ProgressiveImg>
 
             <div className="flex justify-between max-w-xs flex-wrap">
-                {REACTION_TYPES.map((reactionType) => (
+                {ReactionTypes.map((reactionType) => (
                     <Button
                         key={reactionType}
                         variant={
-                            petPost?.reactions?.me?.last === reactionType
+                            petPost?.reactions?.byMe?.value === reactionType
                                 ? "default"
                                 : "outline"
                         }
@@ -61,7 +61,7 @@ export function RatePetPostUI() {
                 ))}
             </div>
 
-            {petPost?.group.myRole() === "admin" && petPost.reactions && (
+            {petPost?._owner.myRole() === "admin" && petPost.reactions && (
                 <ReactionOverview petReactions={petPost.reactions} />
             )}
         </div>
@@ -71,16 +71,15 @@ export function RatePetPostUI() {
 function ReactionOverview({
     petReactions,
 }: {
-    petReactions: Queried<PetReactions>;
+    petReactions: PetReactions;
 }) {
     return (
         <div>
             <h2>Reactions</h2>
             <div className="flex flex-col gap-1">
-                {REACTION_TYPES.map((reactionType) => {
-                    const reactionsOfThisType = Object.values(
-                        petReactions.perAccount
-                    ).filter(({ last }) => last === reactionType);
+                {ReactionTypes.map((reactionType) => {
+                    const reactionsOfThisType = Object.values(petReactions)
+                        .filter((entry) => entry.value === reactionType);
 
                     if (reactionsOfThisType.length === 0) return null;
 

examples/pets/src/components/Auth.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 
-import { LocalAuthComponent } from "jazz-react-auth-local";
+import { PasskeyAuth } from "jazz-react";
 
 import { Input, Button } from "../basicComponents";
 
-export const PrettyAuthUI: LocalAuthComponent = ({
+export const PrettyAuthUI: PasskeyAuth.Component = ({
     loading,
     logIn,
     signUp,

examples/pets/src/components/ShareButton.tsx

@@ -1,19 +1,18 @@
 import { useState } from "react";
 
-import { PetPost } from "../1_types";
+import { PetPost } from "../1_schema";
 
 import { createInviteLink } from "jazz-react";
 import QRCode from "qrcode";
 
 import { useToast, Button } from "../basicComponents";
-import { Queried } from "cojson";
 
-export function ShareButton({ petPost }: { petPost?: Queried<PetPost> }) {
+export function ShareButton({ petPost }: { petPost?: PetPost }) {
     const [existingInviteLink, setExistingInviteLink] = useState<string>();
     const { toast } = useToast();
 
     return (
-        petPost?.group.myRole() === "admin" && (
+        petPost?._owner.myRole() === "admin" && (
             <Button
                 size="sm"
                 className="py-0"

examples/todo/CHANGELOG.md

@@ -0,0 +1,310 @@
+# jazz-example-todo
+
+## 0.0.64-alpha.36
+
+### Patch Changes
+
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [6b0418f]
+- Updated dependencies [1a35307]
+  - jazz-tools@0.7.0-alpha.36
+  - jazz-react@0.7.0-alpha.36
+
+## 0.0.64-alpha.35
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.35
+  - jazz-react@0.7.0-alpha.35
+
+## 0.0.64-alpha.34
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.34
+  - jazz-react@0.7.0-alpha.34
+
+## 0.0.64-alpha.33
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.33
+
+## 0.0.64-alpha.32
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.32
+  - jazz-react@0.7.0-alpha.32
+
+## 0.0.64-alpha.31
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.31
+  - jazz-react@0.7.0-alpha.31
+
+## 0.0.64-alpha.30
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.30
+  - jazz-react@0.7.0-alpha.30
+
+## 0.0.64-alpha.29
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.29
+  - jazz-react@0.7.0-alpha.29
+
+## 0.0.64-alpha.28
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.28
+  - jazz-react@0.7.0-alpha.28
+
+## 0.0.64-alpha.27
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.27
+  - jazz-react@0.7.0-alpha.27
+
+## 0.0.64-alpha.26
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.26
+  - jazz-react@0.7.0-alpha.26
+
+## 0.0.64-alpha.25
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.25
+  - jazz-react@0.7.0-alpha.25
+
+## 0.0.64-alpha.24
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.24
+  - jazz-react@0.7.0-alpha.24
+
+## 0.0.64-alpha.23
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.23
+  - jazz-react@0.7.0-alpha.23
+
+## 0.0.64-alpha.22
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.22
+  - jazz-react@0.7.0-alpha.22
+
+## 0.0.64-alpha.21
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.21
+  - jazz-tools@0.7.0-alpha.21
+
+## 0.0.64-alpha.20
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.20
+  - jazz-tools@0.7.0-alpha.20
+
+## 0.0.64-alpha.19
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.19
+  - jazz-react@0.7.0-alpha.19
+
+## 0.0.64-alpha.18
+
+### Patch Changes
+
+- jazz-react@0.7.0-alpha.18
+
+## 0.0.64-alpha.17
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.17
+  - jazz-react@0.7.0-alpha.17
+
+## 0.0.64-alpha.16
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.16
+  - jazz-react@0.7.0-alpha.16
+
+## 0.0.64-alpha.15
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.15
+  - jazz-react@0.7.0-alpha.15
+
+## 0.0.64-alpha.14
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.14
+  - jazz-react@0.7.0-alpha.14
+
+## 0.0.64-alpha.13
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.13
+  - jazz-react@0.7.0-alpha.13
+
+## 0.0.64-alpha.12
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.12
+  - jazz-tools@0.7.0-alpha.12
+
+## 0.0.64-alpha.11
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.11
+  - jazz-tools@0.7.0-alpha.11
+
+## 0.0.64-alpha.10
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.10
+  - jazz-tools@0.7.0-alpha.10
+
+## 0.0.64-alpha.9
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.9
+  - jazz-tools@0.7.0-alpha.9
+
+## 0.0.64-alpha.8
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.8
+  - jazz-tools@0.7.0-alpha.8
+
+## 0.0.64-alpha.7
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.7
+  - jazz-tools@0.7.0-alpha.7
+
+## 0.0.64-alpha.6
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.6
+  - jazz-tools@0.7.0-alpha.6
+
+## 0.0.64-alpha.5
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.5
+  - jazz-tools@0.7.0-alpha.5
+
+## 0.0.64-alpha.4
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.4
+  - jazz-react@0.7.0-alpha.4
+
+## 0.0.64-alpha.3
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.3
+  - jazz-react@0.7.0-alpha.3
+
+## 0.0.64-alpha.2
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.2
+  - jazz-tools@0.7.0-alpha.2
+
+## 0.0.64-alpha.1
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.1
+  - jazz-tools@0.7.0-alpha.1
+
+## 0.0.64-alpha.0
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.0
+  - cojson@0.7.0-alpha.0
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/todo/README.md

@@ -4,32 +4,37 @@ Live version: https://example-todo.jazz.tools
 
 ## Installing & running the example locally
 
-Start by checking out just the example app to a folder:
+(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
+Start by checking out `jazz`
 ```bash
-npx degit gardencmp/jazz/examples/todo jazz-example-todo
-cd jazz-example-todo
+git clone https://github.com/gardencmp/jazz.git
+cd jazz/examples/todo
+pnpm pack --pack-destination /tmp
+mkdir -p ~/jazz-examples/todo # or any other directory
+tar -xf /tmp/jazz-example-todo-* --strip-components 1 -C ~/jazz-examples/todo
+cd ~/jazz-examples/todo
 ```
 
-(This ensures that you have the example app without git history or our multi-package monorepo)
+This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
 
 Install dependencies:
 
 ```bash
-npm install
+pnpm install
 ```
 
 Start the dev server:
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 ## Structure
 
 - [`src/basicComponents`](./src/basicComponents): simple components to build the UI, unrelated to Jazz (uses [shadcn/ui](https://ui.shadcn.com))
 - [`src/components`](./src/components/): helper components that do contain Jazz-specific logic, but aren't very relevant to understand the basics of Jazz and CoJSON
-- [`src/1_types.ts`](./src/1_types.ts),
+- [`src/1_schema.ts`](./src/1_schema.ts),
 [`src/2_main.tsx`](./src/2_main.tsx),
 [`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx),
 [`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx): the main files for this example, see the walkthrough below
@@ -38,7 +43,7 @@ npm run dev
 
 ### Main parts
 
-1. Defining the data model with CoJSON: [`src/1_types.ts`](./src/1_types.ts)
+1. Defining the data model with CoJSON: [`src/1_schema.ts`](./src/1_schema.ts)
 
 2. The top-level provider `<WithJazz/>` and routing: [`src/2_main.tsx`](./src/2_main.tsx)
 
@@ -48,7 +53,7 @@ npm run dev
 
 ### Helpers
 
-- (not yet explained) Creating invite links/QR codes with `<InviteButton/>`: [`src/components/InviteButton.tsx`](./src/components/InviteButton.tsx)
+- (not yet explained) Creating Invite Links/QR codes with `<InviteButton/>`: [`src/components/InviteButton.tsx`](./src/components/InviteButton.tsx)
 
 This is the whole Todo List app!
 
@@ -61,4 +66,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<WithJazz>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/todo/job-template.nomad

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

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.39",
+  "version": "0.0.64-alpha.36",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "^0.3.5",
-    "jazz-react-auth-local": "^0.3.5",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/todo/src/1_schema.ts

@@ -0,0 +1,55 @@
+import { Account, CoList, CoMap, Profile, co } from "jazz-tools";
+
+/** Walkthrough: Defining the data model with CoJSON
+ *
+ *  Here, we define our main data model of tasks, lists of tasks and projects
+ *  using CoJSON's collaborative map and list types, CoMap & CoList.
+ *
+ *  CoMap values and CoLists items can contain:
+ *  - arbitrary immutable JSON
+ *  - other CoValues
+ **/
+
+/** An individual task which collaborators can tick or rename */
+export class Task extends CoMap {
+    done = co.boolean;
+    text = co.string;
+}
+
+export class ListOfTasks extends CoList.Of(co.ref(Task)) {}
+
+/** Our top level object: a project with a title, referencing a list of tasks */
+export class TodoProject extends CoMap {
+    title = co.string;
+    tasks = co.ref(ListOfTasks);
+}
+
+export class ListOfProjects extends CoList.Of(co.ref(TodoProject)) {}
+
+/** The account root is an app-specific per-user private `CoMap`
+ *  where you can store top-level objects for that user */
+export class TodoAccountRoot extends CoMap {
+    projects = co.ref(ListOfProjects);
+}
+
+export class TodoAccount extends Account {
+    profile = co.ref(Profile);
+    root = co.ref(TodoAccountRoot);
+
+    /** The account migration is run on account creation and on every log-in.
+     *  You can use it to set up the account root and any other initial CoValues you need.
+     */
+    migrate(creationProps?: { name: string }) {
+        super.migrate(creationProps);
+        if (!this._refs.root) {
+            this.root = TodoAccountRoot.create(
+                {
+                    projects: ListOfProjects.create([], { owner: this }),
+                },
+                { owner: this }
+            );
+        }
+    }
+}
+
+/** Walkthrough: Continue with ./2_main.tsx */

examples/todo/src/1_types.ts

@@ -1,23 +0,0 @@
-import { CoMap, CoList } from "cojson";
-
-/** Walkthrough: Defining the data model with CoJSON
- *
- *  Here, we define our main data model of tasks, lists of tasks and projects
- *  using CoJSON's collaborative map and list types, CoMap & CoList.
- *
- *  CoMap values and CoLists items can contain:
- *  - arbitrary immutable JSON
- *  - references to other CoValues (internally stored by their CoID)
- **/
-
-/** An individual task which collaborators can tick or rename */
-export type Task = CoMap<{ done: boolean; text: string; }>;
-
-/** Our top level object: a project with a title, referencing a list of tasks */
-export type TodoProject = CoMap<{
-    title: string;
-    /** A collaborative, ordered list of tasks */
-    tasks: CoList<Task>;
-}>;
-
-/** Walkthrough: Continue with ./2_main.tsx */

examples/todo/src/2_main.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { RouterProvider, createHashRouter } from "react-router-dom";
+import {
+    RouterProvider,
+    createHashRouter,
+    useNavigate,
+} from "react-router-dom";
 import "./index.css";
 
-import { WithJazz, useJazz, useAcceptInvite } from "jazz-react";
-import { LocalAuth } from "jazz-react-auth-local";
+import { createJazzReactContext, PasskeyAuth } from "jazz-react";
 
 import {
     Button,
@@ -14,29 +17,40 @@ import {
 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";
 
 /**
- * Walkthrough: The top-level provider `<WithJazz/>`
+ * Walkthrough: The top-level provider `<Jazz.Provider/>`
  *
- * This shows how to use the top-level provider `<WithJazz/>`,
- * which provides the rest of the app with a `LocalNode` (used through `useJazz` later),
- * based on `LocalAuth` that uses Passkeys (aka WebAuthn) to store a user's account secret
+ * This shows how to use the top-level provider `<Jazz.Provider/>`,
+ * which provides the rest of the app with a controlled account (used through `useAccount` later).
+ * Here we use `PasskeyAuth`, which uses Passkeys (aka WebAuthn) to store a user's account secret
  * - no backend needed.
+ *
+ * `<Jazz.Provider/>` also runs our account migration
  */
 
 const appName = "Jazz Todo List Example";
 
-const auth = LocalAuth({
+const auth = PasskeyAuth<TodoAccount>({
     appName,
     Component: PrettyAuthUI,
+    accountSchema: TodoAccount,
 });
+const Jazz = createJazzReactContext<TodoAccount>({ auth, peer: "wss://mesh.jazz.tools/?key=you@example.com" });
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-    <React.StrictMode>
-        <WithJazz auth={auth}>
-            <App />
-        </WithJazz>
-    </React.StrictMode>
+    // <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">
+                <Jazz.Provider>
+                    <App />
+                </Jazz.Provider>
+            </div>
+        </ThemeProvider>
+    // </React.StrictMode>
 );
 
 /**
@@ -48,13 +62,13 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
  */
 
 function App() {
-    // logOut logs out the AuthProvider passed to `<WithJazz/>` above.
-    const { logOut } = useJazz();
+    // logOut logs out the AuthProvider passed to `<Jazz.Provider/>` above.
+    const { logOut } = useAccount();
 
     const router = createHashRouter([
         {
             path: "/",
-            element: <NewProjectForm />,
+            element: <HomeScreen />,
         },
         {
             path: "/project/:projectId",
@@ -62,29 +76,52 @@ function App() {
         },
         {
             path: "/invite/*",
-            element: <p>Accepting invite...</p>
-        }
+            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((projectID) => router.navigate("/project/" + projectID));
+    useAcceptInvite({
+        invitedObjectSchema: TodoProject,
+        forValueHint: "project",
+        onAccept: (projectID) => router.navigate("/project/" + projectID),
+    });
 
     return (
-        <ThemeProvider>
-            <TitleAndLogo name={appName} />
-            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+        <>
+            <RouterProvider router={router} />
 
-                <RouterProvider router={router} />
+            <Button
+                onClick={() => router.navigate("/").then(logOut)}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </>
+    );
+}
 
-                <Button
-                    onClick={() => router.navigate("/").then(logOut)}
-                    variant="outline"
-                >
-                    Log Out
-                </Button>
-            </div>
-        </ThemeProvider>
+export function HomeScreen() {
+    const { me } = useAccount();
+    const navigate = useNavigate();
+
+    return (
+        <>
+            {me.root?.projects?.length ? <h1>My Projects</h1> : null}
+            {me.root?.projects?.map((project) => {
+                return (
+                    <Button
+                        key={project?.id}
+                        onClick={() => navigate("/project/" + project?.id)}
+                        variant="ghost"
+                    >
+                        {project?.title}
+                    </Button>
+                );
+            })}
+            <NewProjectForm />
+        </>
     );
 }
 

examples/todo/src/3_NewProjectForm.tsx

@@ -1,19 +1,17 @@
 import { useCallback } from "react";
 
-import { useJazz } from "jazz-react";
-
-import { Task, TodoProject } from "./1_types";
+import { ListOfTasks, TodoProject } from "./1_schema";
 
 import { SubmittableInput } from "./basicComponents";
 
-import { CoList } from "cojson";
 import { useNavigate } from "react-router";
+import { useAccount } from "./2_main";
+import { Group } from "jazz-tools";
 
 export function NewProjectForm() {
-    // A `LocalNode` represents a local view of loaded & created CoValues.
-    // It is associated with a current user account, which will determine
+    // `me` represents the current user account, which will determine
     // access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
-    const { localNode } = useJazz();
+    const { me } = useAccount();
     const navigate = useNavigate();
 
     const createProject = useCallback(
@@ -23,17 +21,22 @@ export function NewProjectForm() {
             // To create a new todo project, we first create a `Group`,
             // which is a scope for defining access rights (reader/writer/admin)
             // of its members, which will apply to all CoValues owned by that group.
-            const projectGroup = localNode.createGroup();
+            const projectGroup = Group.create({ owner: me });
 
             // Then we create an empty todo project within that group
-            const project = projectGroup.createMap<TodoProject>({
-                title,
-                tasks: projectGroup.createList<CoList<Task>>(),
-            });
+            const project = TodoProject.create(
+                {
+                    title,
+                    tasks: ListOfTasks.create([], { owner: projectGroup }),
+                },
+                { owner: projectGroup }
+            );
+
+            me.root?.projects?.push(project);
 
             navigate("/project/" + project.id);
         },
-        [localNode, navigate]
+        [me, navigate]
     );
 
     return (
@@ -45,4 +48,4 @@ export function NewProjectForm() {
     );
 }
 
-/** Walkthrough: continue with ./4_ProjectTodoTable.tsx */
+/** Walkthrough: continue with ./4_ProjectTodoTable.tsx */

examples/todo/src/4_ProjectTodoTable.tsx

@@ -1,9 +1,6 @@
 import { useCallback } from "react";
 
-import { CoID, Queried } from "cojson";
-import { useSyncedQuery } from "jazz-react";
-
-import { TodoProject, Task } from "./1_types";
+import { TodoProject, Task } from "./1_schema";
 
 import {
     Checkbox,
@@ -20,23 +17,25 @@ import {
 import { InviteButton } from "./components/InviteButton";
 import uniqolor from "uniqolor";
 import { useParams } from "react-router";
+import { ID } from "jazz-tools";
+import { useCoState } from "./2_main";
 
 /** Walkthrough: Reactively rendering a todo project as a table,
  *               adding and editing tasks
  *
- *  Here in `<TodoTable/>`, we use `useSyncedQuery()` for the first time,
+ *  Here in `<TodoTable/>`, we use `useAutoSub()` for the first time,
  *  in this case to load the CoValue for our `TodoProject` as well as
  *  the `ListOfTasks` referenced in it.
  */
 
 export function ProjectTodoTable() {
-    const projectId = useParams<{ projectId: CoID<TodoProject> }>().projectId;
+    const projectId = useParams<{ projectId: ID<TodoProject> }>().projectId;
 
-    // `useSyncedQuery()` reactively subscribes to updates to a CoValue's
+    // `useAutoSub()` reactively subscribes to updates to a CoValue's
     // content - whether we create edits locally, load persisted data, or receive
     // sync updates from other devices or participants!
     // It also recursively resolves and subsribes to all referenced CoValues.
-    const project = useSyncedQuery(projectId);
+    const project = useCoState(TodoProject, projectId);
 
     // `createTask` is similar to `createProject` we saw earlier, creating a new CoMap
     // for a new task (in the same group as the project), and then
@@ -44,17 +43,18 @@ export function ProjectTodoTable() {
     const createTask = useCallback(
         (text: string) => {
             if (!project?.tasks || !text) return;
-            const task = project.group.createMap<Task>({
-                done: false,
-                text,
-            });
+            const task = Task.create(
+                {
+                    done: false,
+                    text,
+                },
+                { owner: project._owner }
+            );
 
-            // project.tasks is immutable, but `append` will create an edit
-            // that will cause useSyncedQuery to rerender this component
-            // - here and on other devices!
-            project.tasks.append(task);
+            // push will cause useCoState to rerender this component, both here and on other devices
+            project.tasks.push(task);
         },
-        [project?.tasks, project?.group]
+        [project?.tasks, project?._owner]
     );
 
     return (
@@ -74,7 +74,7 @@ export function ProjectTodoTable() {
                         )
                     }
                 </h1>
-                <InviteButton value={project} />
+                <InviteButton value={project} valueHint="project" />
             </div>
             <Table>
                 <TableHeader>
@@ -97,7 +97,7 @@ export function ProjectTodoTable() {
     );
 }
 
-export function TaskRow({ task }: { task: Queried<Task> | undefined }) {
+export function TaskRow({ task }: { task: Task | undefined }) {
     return (
         <TableRow>
             <TableCell>
@@ -108,7 +108,7 @@ export function TaskRow({ task }: { task: Queried<Task> | undefined }) {
                         // Tick or untick the task
                         // Task is also immutable, but this will update all queries
                         // that include this task as a reference
-                        task?.set({ done: !!checked });
+                        if (task) task.done = !!checked;
                     }}
                 />
             </TableCell>
@@ -124,12 +124,12 @@ export function TaskRow({ task }: { task: Queried<Task> | undefined }) {
                     {
                         // Here we see for the first time how we can access edit history
                         // for a CoValue, and use it to display who created the task.
-                        task?.edits.text?.by?.profile?.name ? (
+                        task?._edits.text?.by?.profile?.name ? (
                             <span
                                 className="rounded-full py-0.5 px-2 text-xs"
-                                style={uniqueColoring(task.edits.text.by.id)}
+                                style={uniqueColoring(task._edits.text.by.id)}
                             >
-                                {task.edits.text.by.profile.name}
+                                {task._edits.text.by.profile.name}
                             </span>
                         ) : (
                             <Skeleton className="mt-1 w-[50px] h-[1em] rounded-full" />

examples/todo/src/components/Auth.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 
-import { LocalAuthComponent } from "jazz-react-auth-local";
+import { PasskeyAuth } from "jazz-react";
 
 import { Input, Button } from "../basicComponents";
 
-export const PrettyAuthUI: LocalAuthComponent = ({
+export const PrettyAuthUI: PasskeyAuth.Component = ({
     loading,
     logIn,
     signUp,

examples/todo/src/components/InviteButton.tsx

@@ -1,26 +1,34 @@
 import { useState } from "react";
 
-import { createInviteLink } from "jazz-react";
 import QRCode from "qrcode";
 
 import { useToast, Button } from "../basicComponents";
-import { CoValue, Queried } from "cojson";
+import { createInviteLink } from "jazz-react";
+import { CoValue } from "jazz-tools";
 
-export function InviteButton<T extends CoValue>({ value }: { value: T | Queried<T> | undefined }) {
+export function InviteButton<T extends CoValue>({
+    value,
+    valueHint,
+}: {
+    value?: T;
+    valueHint?: string;
+}) {
     const [existingInviteLink, setExistingInviteLink] = useState<string>();
     const { toast } = useToast();
 
     return (
-        value?.group?.myRole() === "admin" && (
+        value?._owner?.myRole() === "admin" && (
             <Button
                 size="sm"
                 className="py-0"
-                disabled={!value.group || !value.id}
+                disabled={!value._owner || !value.id}
                 variant="outline"
                 onClick={async () => {
                     let inviteLink = existingInviteLink;
-                    if (value.group && value.id && !inviteLink) {
-                        inviteLink = createInviteLink(value, "writer");
+                    if (value._owner && value.id && !inviteLink) {
+                        inviteLink = createInviteLink(value, "writer", {
+                            valueHint,
+                        });
                         setExistingInviteLink(inviteLink);
                     }
                     if (inviteLink) {

examples/todo/vite.config.ts

@@ -13,4 +13,4 @@ export default defineConfig({
   build: {
     minify: false
   }
-})
+})