Release

Add support for property existence

.changeset/README.md

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

.changeset/config.json

@@ -0,0 +1,24 @@
+{
+    "$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-browser-media-images",
+            "jazz-react",
+            "jazz-nodejs",
+            "jazz-run",
+            "cojson-transport-ws",
+            "cojson-storage-indexeddb",
+            "cojson-storage-sqlite"
+        ]
+    ],
+    "access": "public",
+    "baseBranch": "main",
+    "updateInternalDependencies": "patch",
+    "ignore": []
+}

.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", "twit"]
+        example: ["chat", "pets", "todo", "inspector"]
+        # 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: 'pnpm'
-        cache-dependency-path: yarn.lock
 
     - 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;
+        pnpm install
-
+        pnpm turbo build;
-    - name: Yarn Build
-      run: |
-        yarn install --frozen-lockfile;
-        yarn build;
       working-directory: ./examples/${{ matrix.example }}
 
     - name: Docker Build & Push
@@ -53,12 +53,13 @@ jobs:
         cache-from: type=gha
         cache-to: type=gha,mode=max
 
-  deploy:
+  deploy-examples:
     runs-on: ubuntu-latest
-    needs: build
+    needs: build-examples
     strategy:
       matrix:
-        example: ["todo", "pets", "twit"]
+        example: ["chat", "pets", "todo", "inspector"]
+        # example: ["twit", "chat", "counter-js-auth0", "pets", "twit", "file-drop", "inspector"]
 
     steps:
     - uses: actions/checkout@v3
@@ -86,5 +87,5 @@ 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;
+        NOMAD_ADDR=${{ secrets.NOMAD_ADDR }} nomad job run job-instance.nomad;
       working-directory: ./examples/${{ matrix.example }}

.gitignore

@@ -2,3 +2,5 @@ node_modules
 yarn-error.log
 lerna-debug.log
 docsTmp
+.DS_Store
+.turbo

.vscode/settings.json

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

LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright 2023, Garden Computing, Inc.
+Copyright 2024, Garden Computing, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,116 +1,12 @@
-# Jazz - instant sync
+# Jazz - Instant sync
-
-<sub>Homepage: [jazz.tools](https://jazz.tools) &mdash; Docs: [DOCS.md](./DOCS.md) &mdash; Community & support: [Discord](https://discord.gg/utDMjHYg42) &mdash; Updates: [Twitter](https://twitter.com/jazz_tools) & [Email](https://gcmp.io/news)</sub>
-
- **Jazz is an open-source toolkit for building apps with *secure sync.***
-
-Quickly build and ship apps with:
-
-- **Cross-device sync**
-- **Collaborative features** (incl. real-time multiplayer)
-- **Instantly reacting UIs**
-- Local-first storage & offline support
-- File upload and real-time media streaming
-
-# What is *secure sync*?
-
-**Sync** means that, *instead of making API requests*, you:
-
-- **Read and write data as if it was local** &mdash; from anywhere in your app.
-- **Always have data synced to wherever it's needed, instantly:** to other devices of the same user, to other users, to your backend, to your local machine for debugging, etc.
-
-**Secure** means that, *instead of relying on your API or DB for access control*, you:
-
-- **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.
-
-# What's special about Jazz?
-
-Compared to other libraries and frameworks for local-first, sync-based or real-time apps, these are some of the things that make Jazz unique:
-
-- **Jazz is a *batteries-included,* vertically integrated toolkit,** offering everything you need to build an app, including auth, permissions, data model, sync, conflict resolution, blob storage, file uploads, real-time media streaming and more.
-- **Jazz has a *small API surface* of only a few abstractions to learn,** which combine in powerful ways to implement a broad set of features.
-- **Jazz *granularly* loads and caches *only the data that is needed*,** combining *local-first* instant UI reactivity and offline support with the on-demand data efficiency of conventional APIs
-- **Jazz supports end-to-end encryption, but doesn't require it,** allowing you to either manage your user's secret keys for them (based on existing auth flows) or letting your users
-- **Jazz is based on CoJSON, a soon-to-be *open standard,*** which means that there will be a whole ecosystem of compatible libraries and frameworks in a variety of environments &mdash; and it will be easy to achieve (secure) interop between Jazz/CoJSON-based apps and services.
-
-# Jazz Global Mesh
-
-Jazz is open source and you can run your own sync & storage server, but to really provide you with everything you need, we're also running
-**[Jazz Global Mesh](https://jazz.tools/mesh)**, a globally distributed mesh of servers optimized for:
-
- - **Ultra-low-latency sync** (with geo-aware edge caching and optimal routing)
- - **Low-cost, reliable storage**
 
 
-**Jazz Global Mesh is free for small volumes of data** and it's the **default syncing peer,** so you can  **start building multi-user Jazz apps with persistent data in minutes,** using only frontend code!
 
-# Getting started
+ **Jazz is an open-source toolkit for building apps with *distributed state.***
 
-## Example App Walkthrough
+- Homepage: [jazz.tools](https://jazz.tools)
+- Docs: [jazz.tools/docs](https://jazz.tools/docs)
+- Community & support: [Discord](https://discord.gg/utDMjHYg42)
+- Updates: [Twitter](https://twitter.com/jazz_tools) & [Email](https://gcmp.io/news)
 
-**For now the best tutorial is the walkthrough of the [Todo List Example App](#todo-list).**
+Copyright 2024 &mdash; Garden Computing, Inc.
-
-## General Scenarios
-
-### 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) 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).
-    - Schema adapters/importers for Prisma/Drizzle/PostgreSQL introspection coming soon.
-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) and [auto-sub](./DOCS.md#useautosubid).
-
-# Example Apps
-
-## Todo List
-
-**A simple collaborative todo list app.**
-
-Live version: https://example-todo.jazz.tools
-
-Source code & walkthrough: [`./examples/todo`](./examples/todo)
-
-Demonstrates:
-  - Defining a data model with `CoMap`s and `CoList`s
-  - Creating data and setting permissions with `Group`s
-  - Fetching, rendering & editing data from nested `CoValue`s with reactive synced queries
-
-
-## Rate-My-Pet
-
-**A simple social polling app.**
-
-Live version: https://example-pets.jazz.tools
-
-Source code (walkthrough coming soon): [`./examples/pets`](./examples/pets)
-
-Demonstrates:
-  - Implementing per-account data streams (reactions) with `CoStream`s
-  - Implementing image upload and progressive image streaming using helpers from `jazz-react-media-images` (on top of CoJSON's `BinaryCoStreams` & `ImageDefinition` convention)
-
-
-# Documentation & API Reference
-
-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-browser-media-images` API](./DOCS.md#jazz-browser-media-images)
-
-
-In the future we'll build a dedicated docs page on the Jazz homepage.
-
-----
-
-Copyright 2023 &mdash; Garden Computing, Inc.

examples/chat/.eslintrc.cjs

@@ -0,0 +1,13 @@
+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: {},
+}

examples/chat/CHANGELOG.md

@@ -0,0 +1,611 @@
+# jazz-example-chat
+
+## 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/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,54 @@
+{
+  "name": "jazz-example-chat",
+  "private": true,
+  "version": "0.0.67",
+  "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": {
+    "@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/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) => <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/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/inspector/.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/inspector/CHANGELOG.md

@@ -0,0 +1,34 @@
+# jazz-example-chat
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.18
+  - cojson-transport-ws@0.7.18
+
+## 0.0.48
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.17
+  - cojson-transport-ws@0.7.17
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.6.7
+  - jazz-react@0.5.5
+  - jazz-react-auth-local@0.4.18
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/inspector/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/inspector/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 `<WithJazz>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/inspector/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/inspector/job-template.nomad

@@ -0,0 +1,56 @@
+job "inspector$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 = "inspector$BRANCH_SUFFIX"
+        port = "http"
+        provider = "consul"
+      }
+
+      resources {
+        cpu    = 50 # MHz
+        memory = 50 # MB
+      }
+    }
+  }
+}
+# deploy bump 4

examples/inspector/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "jazz-inspector",
+  "private": true,
+  "version": "0.0.49",
+  "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:*",
+    "cojson": "workspace:*",
+    "cojson-transport-ws": "workspace:*",
+    "effect": "^3.5.2",
+    "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/inspector/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

examples/inspector/src/app.tsx

@@ -0,0 +1,309 @@
+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";
+
+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

@@ -0,0 +1,249 @@
+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

@@ -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/inspector/src/link-icon.tsx

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

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

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

examples/inspector/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/inspector/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/inspector/tsconfig.node.json

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

examples/inspector/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/.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier'
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',

examples/pets/.prettierrc.js

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+    trailingComma: "all",
+    tabWidth: 4,
+    semi: true,
+    singleQuote: false,
+};
+
+export default config;

examples/pets/CHANGELOG.md

@@ -0,0 +1,632 @@
+# jazz-example-pets
+
+## 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
+
+-   Updated dependencies
+    -   jazz-tools@0.7.16
+    -   jazz-browser-media-images@0.7.16
+    -   jazz-react@0.7.16
+
+## 0.0.80
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.15
+
+## 0.0.79
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.14
+    -   jazz-react@0.7.14
+    -   jazz-browser-media-images@0.7.14
+
+## 0.0.78
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.13
+    -   jazz-browser-media-images@0.7.13
+    -   jazz-react@0.7.13
+
+## 0.0.77
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.12
+    -   jazz-browser-media-images@0.7.12
+    -   jazz-react@0.7.12
+
+## 0.0.76
+
+### Patch Changes
+
+-   jazz-react@0.7.11
+-   jazz-tools@0.7.11
+-   jazz-browser-media-images@0.7.11
+
+## 0.0.75
+
+### Patch Changes
+
+-   jazz-react@0.7.10
+-   jazz-tools@0.7.10
+-   jazz-browser-media-images@0.7.10
+
+## 0.0.74
+
+### Patch Changes
+
+-   jazz-react@0.7.9
+-   jazz-tools@0.7.9
+-   jazz-browser-media-images@0.7.9
+
+## 0.0.73
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.8
+    -   jazz-browser-media-images@0.7.8
+    -   jazz-react@0.7.8
+
+## 0.0.72
+
+### Patch Changes
+
+-   Updated dependencies [9fdc91c]
+    -   jazz-react@0.7.7
+
+## 0.0.71
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.6
+    -   jazz-browser-media-images@0.7.6
+    -   jazz-react@0.7.6
+
+## 0.0.70
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.5
+    -   jazz-browser-media-images@0.7.5
+
+## 0.0.69
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.4
+
+## 0.0.68
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.3
+    -   jazz-browser-media-images@0.7.3
+    -   jazz-react@0.7.3
+
+## 0.0.67
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.2
+
+## 0.0.66
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.1
+    -   jazz-browser-media-images@0.7.1
+    -   jazz-react@0.7.1
+
+## 0.0.65
+
+### Patch Changes
+
+-   Updated dependencies [8636319]
+-   Updated dependencies [8636319]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [96c494f]
+-   Updated dependencies [59c18c3]
+-   Updated dependencies [19f52b7]
+-   Updated dependencies [8636319]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [d8fe2b1]
+-   Updated dependencies [19004b4]
+-   Updated dependencies [a78f168]
+-   Updated dependencies [52675c9]
+-   Updated dependencies [129e2c1]
+-   Updated dependencies [6d49e9b]
+-   Updated dependencies [1cfa279]
+-   Updated dependencies [704af7d]
+-   Updated dependencies [e97f730]
+-   Updated dependencies [460478f]
+-   Updated dependencies [6b0418f]
+-   Updated dependencies [e299c3e]
+-   Updated dependencies [ed5643a]
+-   Updated dependencies [bde684f]
+-   Updated dependencies [c4151fc]
+-   Updated dependencies [63374cc]
+-   Updated dependencies [01ac646]
+-   Updated dependencies [a5e68a4]
+-   Updated dependencies [8636319]
+-   Updated dependencies [952982e]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [5fa277c]
+-   Updated dependencies [60d5ca2]
+-   Updated dependencies [21771c4]
+-   Updated dependencies [77c2b56]
+-   Updated dependencies [63374cc]
+-   Updated dependencies [d2e03ff]
+-   Updated dependencies [354bdcd]
+-   Updated dependencies [ece35b3]
+-   Updated dependencies [60d5ca2]
+-   Updated dependencies [69ac514]
+-   Updated dependencies [f8a5c46]
+-   Updated dependencies [f0f6f1b]
+-   Updated dependencies [e5eed5b]
+-   Updated dependencies [1a44f87]
+-   Updated dependencies [627d895]
+-   Updated dependencies [1200aae]
+-   Updated dependencies [63374cc]
+-   Updated dependencies [ece35b3]
+-   Updated dependencies [38d4410]
+-   Updated dependencies [85d2b62]
+-   Updated dependencies [fd86c11]
+-   Updated dependencies [52675c9]
+    -   jazz-tools@0.7.0
+    -   jazz-browser-media-images@0.7.0
+    -   jazz-react@0.7.0
+
+## 0.0.65-alpha.42
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.42
+    -   jazz-browser-media-images@0.7.0-alpha.40
+    -   jazz-react@0.7.0-alpha.42
+
+## 0.0.65-alpha.41
+
+### Patch Changes
+
+-   jazz-tools@0.7.0-alpha.41
+-   jazz-browser-media-images@0.7.0-alpha.39
+-   jazz-react@0.7.0-alpha.41
+
+## 0.0.65-alpha.40
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.40
+
+## 0.0.65-alpha.39
+
+### Patch Changes
+
+-   jazz-react@0.7.0-alpha.39
+-   jazz-tools@0.7.0-alpha.39
+-   jazz-browser-media-images@0.7.0-alpha.38
+
+## 0.0.65-alpha.38
+
+### Patch Changes
+
+-   Updated dependencies
+-   Updated dependencies
+-   Updated dependencies
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.38
+    -   jazz-react@0.7.0-alpha.38
+    -   jazz-browser-media-images@0.7.0-alpha.37
+
+## 0.0.65-alpha.37
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.37
+    -   jazz-browser-media-images@0.7.0-alpha.36
+    -   jazz-tools@0.7.0-alpha.37
+
+## 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
+git clone https://github.com/gardencmp/jazz.git
-cd jazz-example-pets
+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,14 +1,19 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.20",
+  "version": "0.0.85",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write './src/**/*.{ts,tsx}'",
     "preview": "vite preview"
   },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --fix",
+    "*.{js,jsx,mdx,json}": "prettier --write"
+  },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
@@ -16,9 +21,9 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "^0.4.8",
+    "jazz-browser-media-images": "workspace:*",
-    "jazz-react": "^0.4.7",
+    "jazz-react": "workspace:*",
-    "jazz-react-auth-local": "^0.4.7",
+    "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,59 @@
+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(this: PetAccount, creationProps?: { name: string }) {
+        super.migrate(creationProps);
+        if (!this._refs.root) {
+            this.root = PetAccountRoot.create(
+                {
+                    posts: ListOfPosts.create([], { owner: this }),
+                },
+                { owner: this },
+            );
+        }
+    }
+}
+
+/** Walkthrough: Continue with ./2_App.tsx */

examples/pets/src/1_types.ts

@@ -1,52 +0,0 @@
-import {
-    AccountMigration,
-    CoList,
-    CoMap,
-    CoStream,
-    Media,
-    Profile,
-} 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["id"];
-    reactions: PetReactions["id"];
-}>;
-
-export const REACTION_TYPES = [
-    "aww",
-    "love",
-    "haha",
-    "wow",
-    "tiny",
-    "chonkers",
-] as const;
-
-export type ReactionType = (typeof REACTION_TYPES)[number];
-
-export type PetReactions = CoStream<ReactionType>;
-
-export type ListOfPosts = CoList<PetPost["id"]>;
-
-export type PetAccountRoot = CoMap<{
-    posts: ListOfPosts["id"];
-}>;
-
-export const migration: AccountMigration<Profile, PetAccountRoot> = (account) => {
-    if (!account.get("root")) {
-        const root = account.createMap<PetAccountRoot>({
-            posts: account.createList<ListOfPosts>().id,
-        });
-        account.set("root", root.id);
-        console.log("Created root", root.id);
-    }
-};
-
-/** Walkthrough: Continue with ./2_App.tsx */

examples/pets/src/2_main.tsx

@@ -3,8 +3,7 @@ import ReactDOM from "react-dom/client";
 import { Link, RouterProvider, createHashRouter } from "react-router-dom";
 import "./index.css";
 
-import { WithJazz, useJazz, useAcceptInvite } from "jazz-react";
+import { createJazzReactContext, PasskeyAuth } from "jazz-react";
-import { LocalAuth } from "jazz-react-auth-local";
 
 import {
     Button,
@@ -14,8 +13,7 @@ import {
 import { PrettyAuthUI } from "./components/Auth.tsx";
 import { NewPetPostForm } from "./3_NewPetPostForm.tsx";
 import { RatePetPostUI } from "./4_RatePetPostUI.tsx";
-import { PetAccountRoot, migration } from "./1_types.ts";
+import { PetAccount, PetPost } from "./1_schema.ts";
-import { AccountMigration, Profile } from "cojson";
 
 /** Walkthrough: The top-level provider `<WithJazz/>`
  *
@@ -26,22 +24,30 @@ import { AccountMigration, Profile } from "cojson";
 
 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",
+});
+// eslint-disable-next-line react-refresh/only-export-components
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;
+
 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} migration={migration as AccountMigration}>
+                <Jazz.Provider loading={<div>Loading</div>}>
                     <App />
-                </WithJazz>
+                </Jazz.Provider>
             </div>
         </ThemeProvider>
-    </React.StrictMode>
+    </React.StrictMode>,
 );
 
 /** Walkthrough: Creating pet posts & routing in `<App/>`
@@ -52,7 +58,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
  */
 
 export default function App() {
-    const { logOut } = useJazz();
+    const { logOut } = useAccount();
 
     const router = createHashRouter([
         {
@@ -73,7 +79,10 @@ export default function App() {
         },
     ]);
 
-    useAcceptInvite((petPostID) => router.navigate("/pet/" + petPostID));
+    useAcceptInvite({
+        invitedObjectSchema: PetPost,
+        onAccept: (petPostID) => router.navigate("/pet/" + petPostID),
+    });
 
     return (
         <>
@@ -90,7 +99,7 @@ export default function App() {
 }
 
 export function PostOverview() {
-    const { me } = useJazz<Profile, PetAccountRoot>();
+    const { me } = useAccount();
 
     const myPosts = me.root?.posts;
 
@@ -105,7 +114,7 @@ export function PostOverview() {
                                 <Link key={post.id} to={"/pet/" + post.id}>
                                     {post.name}
                                 </Link>
-                            )
+                            ),
                     )}
                 </>
             ) : undefined}

examples/pets/src/3_NewPetPostForm.tsx

@@ -1,62 +1,63 @@
 import { ChangeEvent, useCallback, useState } from "react";
 import { useNavigate } from "react-router";
+import { createImage } from "jazz-browser-media-images";
 
-import { CoID, CoMap, Media, Profile } from "cojson";
+import { PetPost, PetReactions } from "./1_schema";
-import { useAutoSub, useJazz } from "jazz-react";
-import { BrowserImage, createImage } from "jazz-browser-media-images";
-
-import { PetAccountRoot, PetPost, PetReactions } from "./1_types";
-
 import { Input, Button } from "./basicComponents";
+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<{
+class PartialPetPost extends CoMap {
-    name: string;
+    name = co.string;
-    image?: Media.ImageDefinition["id"];
+    image = co.ref(ImageDefinition, { optional: true });
-    reactions: PetReactions["id"];
+    reactions = co.ref(PetReactions);
-}>;
+}
 
 export function NewPetPostForm() {
-    const { me } = useJazz<Profile, PetAccountRoot>();
+    const { me } = useAccount();
     const navigate = useNavigate();
 
-    const [newPostId, setNewPostId] = useState<
+    const [newPostId, setNewPostId] = useState<ID<PartialPetPost> | undefined>(
-        CoID<PartialPetPost> | undefined
+        undefined,
-    >(undefined);
+    );
 
-    const newPetPost = useAutoSub(newPostId);
+    const newPetPost = useCoState(PartialPetPost, newPostId);
 
     const onChangeName = useCallback(
         (name: string) => {
             if (newPetPost) {
-                newPetPost.set({ name });
+                newPetPost.name = name;
             } else {
-                const petPostGroup = me.createGroup();
+                const petPostGroup = Group.create({ owner: me });
-                const petPost = petPostGroup.createMap<PartialPetPost>({
+                const petPost = PartialPetPost.create(
-                    name,
+                    {
-                    reactions: petPostGroup.createStream<PetReactions>().id,
+                        name,
-                });
+                        reactions: PetReactions.create([], { owner: me }),
+                    },
+                    { owner: petPostGroup },
+                );
 
                 setNewPostId(petPost.id);
             }
         },
-        [me, newPetPost]
+        [me, newPetPost],
     );
 
     const onImageSelected = useCallback(
         async (event: ChangeEvent<HTMLInputElement>) => {
             if (!newPetPost || !event.target.files) return;
 
-            const image = await createImage(
+            const image = await createImage(event.target.files[0], {
-                event.target.files[0],
+                owner: newPetPost._owner,
-                newPetPost.meta.group
+            });
-            );
 
-            newPetPost.set({ image: image.id });
+            newPetPost.image = image;
         },
-        [newPetPost]
+        [newPetPost],
     );
 
     const onSubmit = useCallback(() => {
@@ -67,7 +68,7 @@ export function NewPetPostForm() {
             throw new Error("No posts list found");
         }
 
-        myPosts.append(newPetPost.id as PetPost["id"]);
+        myPosts.push(newPetPost as PetPost);
 
         navigate("/pet/" + newPetPost.id);
     }, [me.root?.posts, newPetPost, navigate]);
@@ -84,13 +85,11 @@ export function NewPetPostForm() {
             />
 
             {newPetPost?.image ? (
-                <img
+                <ProgressiveImg image={newPetPost.image}>
-                    className="w-80 max-w-full rounded"
+                    {({ src }) => (
-                    src={
+                        <img className="w-80 max-w-full rounded" src={src} />
-                        newPetPost?.image.as(BrowserImage)
+                    )}
-                            ?.highestResSrcOrPlaceholder
+                </ProgressiveImg>
-                    }
-                />
             ) : (
                 <Input
                     type="file"

examples/pets/src/4_RatePetPostUI.tsx

@@ -1,18 +1,20 @@
 import { useParams } from "react-router";
-import { CoID } from "cojson";
 
-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 { BrowserImage } from "jazz-browser-media-images";
 import uniqolor from "uniqolor";
-import { Resolved, useAutoSub } from "jazz-react";
+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,9 +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 = useAutoSub(petPostID);
+    const petPost = useCoState(PetPost, petPostID);
 
     return (
         <div className="flex flex-col gap-8">
@@ -33,22 +35,18 @@ export function RatePetPostUI() {
                 <ShareButton petPost={petPost} />
             </div>
 
-            {petPost?.image && (
+            <ProgressiveImg image={petPost?.image}>
-                <img
+                {({ src }) => (
-                    className="w-80 max-w-full rounded"
+                    <img className="w-80 max-w-full rounded" src={src} />
-                    src={
+                )}
-                        petPost.image.as(BrowserImage)
+            </ProgressiveImg>
-                            ?.highestResSrcOrPlaceholder
-                    }
-                />
-            )}
 
             <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"
                         }
@@ -63,26 +61,22 @@ export function RatePetPostUI() {
                 ))}
             </div>
 
-            {petPost?.meta.group.myRole() === "admin" && petPost.reactions && (
+            {petPost?._owner.myRole() === "admin" && petPost.reactions && (
                 <ReactionOverview petReactions={petPost.reactions} />
             )}
         </div>
     );
 }
 
-function ReactionOverview({
+function ReactionOverview({ petReactions }: { petReactions: PetReactions }) {
-    petReactions,
-}: {
-    petReactions: Resolved<PetReactions>;
-}) {
     return (
         <div>
             <h2>Reactions</h2>
             <div className="flex flex-col gap-1">
-                {REACTION_TYPES.map((reactionType) => {
+                {ReactionTypes.map((reactionType) => {
-                    const reactionsOfThisType = petReactions.perAccount
+                    const reactionsOfThisType = Object.values(
-                        .map(([, reaction]) => reaction)
+                        petReactions,
-                        .filter(({ last }) => last === reactionType);
+                    ).filter((entry) => entry.value === reactionType);
 
                     if (reactionsOfThisType.length === 0) return null;
 
@@ -106,7 +100,7 @@ function ReactionOverview({
                                         className="mt-1 w-[50px] h-[1em] rounded-full"
                                         key={idx}
                                     />
-                                )
+                                ),
                             )}
                         </div>
                     );

examples/pets/src/basicComponents/lib/utils.ts

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

examples/pets/src/basicComponents/themeProvider.tsx

@@ -25,7 +25,7 @@ export function ThemeProvider({
     ...props
 }: ThemeProviderProps) {
     const [theme, setTheme] = useState(
-        () => localStorage.getItem(storageKey) || defaultTheme
+        () => localStorage.getItem(storageKey) || defaultTheme,
     );
 
     useEffect(() => {
@@ -35,7 +35,7 @@ export function ThemeProvider({
 
         if (theme === "system") {
             const systemTheme = window.matchMedia(
-                "(prefers-color-scheme: dark)"
+                "(prefers-color-scheme: dark)",
             ).matches
                 ? "dark"
                 : "light";
@@ -62,6 +62,7 @@ export function ThemeProvider({
     );
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const useTheme = () => {
     const context = useContext(ThemeProviderContext);
 

examples/pets/src/basicComponents/ui/button.tsx

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

examples/pets/src/basicComponents/ui/input.tsx

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

examples/pets/src/basicComponents/ui/skeleton.tsx

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

examples/pets/src/basicComponents/ui/toast.tsx

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

examples/pets/src/basicComponents/ui/toaster.tsx

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

examples/pets/src/basicComponents/ui/use-toast.ts

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

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,18 +1,18 @@
 import { useState } from "react";
 
-import { PetPost } from "../1_types";
+import { PetPost } from "../1_schema";
 
-import { Resolved, createInviteLink } from "jazz-react";
+import { createInviteLink } from "jazz-react";
 import QRCode from "qrcode";
 
 import { useToast, Button } from "../basicComponents";
 
-export function ShareButton({ petPost }: { petPost?: Resolved<PetPost> }) {
+export function ShareButton({ petPost }: { petPost?: PetPost }) {
     const [existingInviteLink, setExistingInviteLink] = useState<string>();
     const { toast } = useToast();
 
     return (
-        petPost?.meta.group.myRole() === "admin" && (
+        petPost?._owner.myRole() === "admin" && (
             <Button
                 size="sm"
                 className="py-0"
@@ -34,7 +34,7 @@ export function ShareButton({ petPost }: { petPost?: Resolved<PetPost> }) {
                                 description: (
                                     <img src={qr} className="w-20 h-20" />
                                 ),
-                            })
+                            }),
                         );
                     }
                 }}

examples/todo/.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier'
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',

examples/todo/.prettierrc.js

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+    trailingComma: "all",
+    tabWidth: 4,
+    semi: true,
+    singleQuote: false,
+};
+
+export default config;

examples/todo/CHANGELOG.md

@@ -0,0 +1,566 @@
+# jazz-example-todo
+
+## 0.0.84
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.20
+    -   jazz-react@0.7.20
+
+## 0.0.83
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.19
+    -   jazz-react@0.7.19
+
+## 0.0.82
+
+### Patch Changes
+
+-   jazz-react@0.7.18
+-   jazz-tools@0.7.18
+
+## 0.0.81
+
+### Patch Changes
+
+-   jazz-react@0.7.17
+-   jazz-tools@0.7.17
+
+## 0.0.80
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.16
+    -   jazz-react@0.7.16
+
+## 0.0.79
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.15
+
+## 0.0.78
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.14
+    -   jazz-react@0.7.14
+
+## 0.0.77
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.13
+    -   jazz-react@0.7.13
+
+## 0.0.76
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.12
+    -   jazz-react@0.7.12
+
+## 0.0.75
+
+### Patch Changes
+
+-   jazz-react@0.7.11
+-   jazz-tools@0.7.11
+
+## 0.0.74
+
+### Patch Changes
+
+-   jazz-react@0.7.10
+-   jazz-tools@0.7.10
+
+## 0.0.73
+
+### Patch Changes
+
+-   jazz-react@0.7.9
+-   jazz-tools@0.7.9
+
+## 0.0.72
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.8
+    -   jazz-react@0.7.8
+
+## 0.0.71
+
+### Patch Changes
+
+-   Updated dependencies [9fdc91c]
+    -   jazz-react@0.7.7
+
+## 0.0.70
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.6
+    -   jazz-react@0.7.6
+
+## 0.0.69
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.5
+
+## 0.0.68
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.4
+
+## 0.0.67
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.3
+    -   jazz-react@0.7.3
+
+## 0.0.66
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.2
+
+## 0.0.65
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.1
+    -   jazz-react@0.7.1
+
+## 0.0.64
+
+### Patch Changes
+
+-   Updated dependencies [8636319]
+-   Updated dependencies [8636319]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [96c494f]
+-   Updated dependencies [59c18c3]
+-   Updated dependencies [19f52b7]
+-   Updated dependencies [8636319]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [d8fe2b1]
+-   Updated dependencies [19004b4]
+-   Updated dependencies [a78f168]
+-   Updated dependencies [52675c9]
+-   Updated dependencies [129e2c1]
+-   Updated dependencies [6d49e9b]
+-   Updated dependencies [1cfa279]
+-   Updated dependencies [704af7d]
+-   Updated dependencies [e97f730]
+-   Updated dependencies [460478f]
+-   Updated dependencies [6b0418f]
+-   Updated dependencies [e299c3e]
+-   Updated dependencies [ed5643a]
+-   Updated dependencies [bde684f]
+-   Updated dependencies [c4151fc]
+-   Updated dependencies [63374cc]
+-   Updated dependencies [01ac646]
+-   Updated dependencies [a5e68a4]
+-   Updated dependencies [8636319]
+-   Updated dependencies [952982e]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [5fa277c]
+-   Updated dependencies [60d5ca2]
+-   Updated dependencies [21771c4]
+-   Updated dependencies [77c2b56]
+-   Updated dependencies [63374cc]
+-   Updated dependencies [d2e03ff]
+-   Updated dependencies [354bdcd]
+-   Updated dependencies [ece35b3]
+-   Updated dependencies [60d5ca2]
+-   Updated dependencies [69ac514]
+-   Updated dependencies [f8a5c46]
+-   Updated dependencies [f0f6f1b]
+-   Updated dependencies [e5eed5b]
+-   Updated dependencies [1a44f87]
+-   Updated dependencies [627d895]
+-   Updated dependencies [1200aae]
+-   Updated dependencies [63374cc]
+-   Updated dependencies [ece35b3]
+-   Updated dependencies [38d4410]
+-   Updated dependencies [85d2b62]
+-   Updated dependencies [fd86c11]
+-   Updated dependencies [52675c9]
+    -   jazz-tools@0.7.0
+    -   jazz-react@0.7.0
+
+## 0.0.64-alpha.42
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.42
+    -   jazz-react@0.7.0-alpha.42
+
+## 0.0.64-alpha.41
+
+### Patch Changes
+
+-   jazz-tools@0.7.0-alpha.41
+-   jazz-react@0.7.0-alpha.41
+
+## 0.0.64-alpha.40
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.40
+
+## 0.0.64-alpha.39
+
+### Patch Changes
+
+-   jazz-react@0.7.0-alpha.39
+-   jazz-tools@0.7.0-alpha.39
+
+## 0.0.64-alpha.38
+
+### Patch Changes
+
+-   Updated dependencies
+-   Updated dependencies
+-   Updated dependencies
+-   Updated dependencies
+    -   jazz-tools@0.7.0-alpha.38
+    -   jazz-react@0.7.0-alpha.38
+
+## 0.0.64-alpha.37
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.0-alpha.37
+    -   jazz-tools@0.7.0-alpha.37
+
+## 0.0.64-alpha.36
+
+### Patch Changes
+
+-   Updated dependencies [1a35307]
+-   Updated dependencies [1a35307]
+-   Updated dependencies [6b0418f]
+-   Updated dependencies [1a35307]
+    -   jazz-tools@0.7.0-alpha.36
+    -   jazz-react@0.7.0-alpha.36
+
+## 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
+git clone https://github.com/gardencmp/jazz.git
-cd jazz-example-todo
+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,14 +1,19 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.44",
+  "version": "0.0.84",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write './src/**/*.{ts,tsx}'",
     "preview": "vite preview"
   },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --fix",
+    "*.{js,jsx,mdx,json}": "prettier --write"
+  },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
@@ -16,8 +21,8 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "^0.4.7",
+    "jazz-react": "workspace:*",
-    "jazz-react-auth-local": "^0.4.7",
+    "jazz-tools": "workspace:*",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -36,6 +41,7 @@
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",

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(this: TodoAccount, 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,42 +0,0 @@
-import { CoMap, CoList, AccountMigration, Profile } 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 by their CoID
- **/
-
-/** An individual task which collaborators can tick or rename */
-export type Task = CoMap<{ done: boolean; text: string; }>;
-
-export type ListOfTasks = CoList<Task["id"]>;
-
-/** 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: ListOfTasks["id"];
-}>;
-
-export type ListOfProjects = CoList<TodoProject["id"]>;
-
-export type TodoAccountRoot = CoMap<{
-    projects: ListOfProjects["id"];
-}>;
-
-export const migration: AccountMigration<Profile, TodoAccountRoot> = (account) => {
-    if (!account.get("root")) {
-        account.set(
-            "root",
-            account.createMap<TodoAccountRoot>({
-                projects: account.createList<ListOfProjects>().id,
-            }).id
-        );
-    }
-}
-
-/** Walkthrough: Continue with ./2_main.tsx */

examples/todo/src/2_main.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import {
     RouterProvider,
@@ -7,8 +6,7 @@ import {
 } from "react-router-dom";
 import "./index.css";
 
-import { WithJazz, useJazz, useAcceptInvite } from "jazz-react";
+import { createJazzReactContext, PasskeyAuth } from "jazz-react";
-import { LocalAuth } from "jazz-react-auth-local";
 
 import {
     Button,
@@ -18,36 +16,44 @@ import {
 import { PrettyAuthUI } from "./components/Auth.tsx";
 import { NewProjectForm } from "./3_NewProjectForm.tsx";
 import { ProjectTodoTable } from "./4_ProjectTodoTable.tsx";
-import { TodoAccountRoot, migration } from "./1_types.ts";
+import { TodoAccount, TodoProject } from "./1_schema.ts";
-import { AccountMigration, Profile } from "cojson";
 
 /**
- * Walkthrough: The top-level provider `<WithJazz/>`
+ * Walkthrough: The top-level provider `<Jazz.Provider/>`
  *
- * This shows how to use the top-level provider `<WithJazz/>`,
+ * This shows how to use the top-level provider `<Jazz.Provider/>`,
- * which provides the rest of the app with a `LocalNode` (used through `useJazz` later),
+ * which provides the rest of the app with a controlled account (used through `useAccount` later).
- * based on `LocalAuth` that uses Passkeys (aka WebAuthn) to store a user's account secret
+ * 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",
+});
+// eslint-disable-next-line react-refresh/only-export-components
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-    <React.StrictMode>
+    // <React.StrictMode>
-        <ThemeProvider>
+    <ThemeProvider>
-            <TitleAndLogo name={appName} />
+        <TitleAndLogo name={appName} />
-            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+        <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-                <WithJazz auth={auth} migration={migration as AccountMigration}>
+            <Jazz.Provider>
-                    <App />
+                <App />
-                </WithJazz>
+            </Jazz.Provider>
-            </div>
+        </div>
-        </ThemeProvider>
+    </ThemeProvider>,
-    </React.StrictMode>
+    // </React.StrictMode>
 );
 
 /**
@@ -57,10 +63,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
  * on the CoValue ID (CoID) of our TodoProject, stored in the URL hash
  * - which can also contain invite links.
  */
-
+export default function App() {
-function App() {
+    // logOut logs out the AuthProvider passed to `<Jazz.Provider/>` above.
-    // logOut logs out the AuthProvider passed to `<WithJazz/>` above.
+    const { logOut } = useAccount();
-    const { logOut } = useJazz();
 
     const router = createHashRouter([
         {
@@ -79,7 +84,11 @@ function App() {
 
     // `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 (
         <>
@@ -95,21 +104,23 @@ function App() {
     );
 }
 
-export function HomeScreen() {
+function HomeScreen() {
-    const { me } = useJazz<Profile, TodoAccountRoot>();
+    const { me } = useAccount({
+        root: { projects: [{}] },
+    });
     const navigate = useNavigate();
 
     return (
         <>
-            {me.root?.projects?.length ? <h1>My Projects</h1> : null}
+            {me?.root.projects.length ? <h1>My Projects</h1> : null}
-            {me.root?.projects?.map((project) => {
+            {me?.root.projects.map((project) => {
                 return (
                     <Button
-                        key={project?.id}
+                        key={project.id}
                         onClick={() => navigate("/project/" + project?.id)}
                         variant="ghost"
                     >
-                        {project?.title}
+                        {project.title}
                     </Button>
                 );
             })}

examples/todo/src/3_NewProjectForm.tsx

@@ -1,18 +1,17 @@
 import { useCallback } from "react";
 
-import { useJazz } from "jazz-react";
+import { ListOfTasks, TodoProject } from "./1_schema";
-
-import { ListOfTasks, TodoAccountRoot, TodoProject } from "./1_types";
 
 import { SubmittableInput } from "./basicComponents";
 
 import { useNavigate } from "react-router";
-import { Profile } from "cojson";
+import { useAccount } from "./2_main";
+import { Group } from "jazz-tools";
 
 export function NewProjectForm() {
     // `me` represents the current user account, which will determine
     // access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
-    const { me } = useJazz<Profile, TodoAccountRoot>();
+    const { me } = useAccount();
     const navigate = useNavigate();
 
     const createProject = useCallback(
@@ -22,19 +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 = me.createGroup();
+            const projectGroup = Group.create({ owner: me });
 
             // Then we create an empty todo project within that group
-            const project = projectGroup.createMap<TodoProject>({
+            const project = TodoProject.create(
-                title,
+                {
-                tasks: projectGroup.createList<ListOfTasks>().id,
+                    title,
-            });
+                    tasks: ListOfTasks.create([], { owner: projectGroup }),
+                },
+                { owner: projectGroup },
+            );
 
-            me.root?.projects?.append(project.id);
+            me.root?.projects?.push(project);
 
             navigate("/project/" + project.id);
         },
-        [me, navigate]
+        [me, navigate],
     );
 
     return (

examples/todo/src/4_ProjectTodoTable.tsx

@@ -1,8 +1,6 @@
 import { useCallback } from "react";
 
-import { CoID } from "cojson";
+import { TodoProject, Task } from "./1_schema";
-
-import { TodoProject, Task } from "./1_types";
 
 import {
     Checkbox,
@@ -19,7 +17,8 @@ import {
 import { InviteButton } from "./components/InviteButton";
 import uniqolor from "uniqolor";
 import { useParams } from "react-router";
-import { Resolved, useAutoSub } from "jazz-react";
+import { ID } from "jazz-tools";
+import { useCoState } from "./2_main";
 
 /** Walkthrough: Reactively rendering a todo project as a table,
  *               adding and editing tasks
@@ -30,13 +29,13 @@ import { Resolved, useAutoSub } from "jazz-react";
  */
 
 export function ProjectTodoTable() {
-    const projectId = useParams<{ projectId: CoID<TodoProject> }>().projectId;
+    const projectId = useParams<{ projectId: ID<TodoProject> }>().projectId;
 
     // `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 = useAutoSub(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.meta.group.createMap<Task>({
+            const task = Task.create(
-                done: false,
+                {
-                text,
+                    done: false,
-            });
+                    text,
+                },
+                { owner: project._owner },
+            );
 
-            // project.tasks is immutable, but `append` will create an edit
+            // push will cause useCoState to rerender this component, both here and on other devices
-            // that will cause useAutoSub to rerender this component
+            project.tasks.push(task);
-            // - here and on other devices!
-            project.tasks.append(task.id);
         },
-        [project?.tasks, project?.meta.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>
@@ -85,7 +85,7 @@ export function ProjectTodoTable() {
                 </TableHeader>
                 <TableBody>
                     {project?.tasks?.map(
-                        (task) => task && <TaskRow key={task.id} task={task} />
+                        (task) => task && <TaskRow key={task.id} task={task} />,
                     )}
                     <NewTaskInputRow
                         createTask={createTask}
@@ -97,7 +97,7 @@ export function ProjectTodoTable() {
     );
 }
 
-export function TaskRow({ task }: { task: Resolved<Task> | undefined }) {
+export function TaskRow({ task }: { task: Task | undefined }) {
     return (
         <TableRow>
             <TableCell>
@@ -108,7 +108,7 @@ export function TaskRow({ task }: { task: Resolved<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: Resolved<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?.meta.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.meta.edits.text.by.id)}
+                                style={uniqueColoring(task._edits.text.by.id)}
                             >
-                                {task.meta.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/basicComponents/SubmittableInput.tsx

@@ -18,7 +18,7 @@ export function SubmittableInput({
             onSubmit={(e) => {
                 e.preventDefault();
                 const textEl = e.currentTarget.elements.namedItem(
-                    "text"
+                    "text",
                 ) as HTMLInputElement;
                 onSubmit(textEl.value);
                 textEl.value = "";
@@ -31,7 +31,11 @@ export function SubmittableInput({
                 autoComplete="off"
                 disabled={disabled}
             />
-            <Button asChild type="submit" className="flex-shrink flex-1 cursor-pointer">
+            <Button
+                asChild
+                type="submit"
+                className="flex-shrink flex-1 cursor-pointer"
+            >
                 <Input type="submit" value={label} disabled={disabled} />
             </Button>
         </form>

examples/todo/src/basicComponents/TitleAndLogo.tsx

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

examples/todo/src/basicComponents/lib/utils.ts

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

examples/todo/src/basicComponents/themeProvider.tsx

@@ -25,7 +25,7 @@ export function ThemeProvider({
     ...props
 }: ThemeProviderProps) {
     const [theme, setTheme] = useState(
-        () => localStorage.getItem(storageKey) || defaultTheme
+        () => localStorage.getItem(storageKey) || defaultTheme,
     );
 
     useEffect(() => {
@@ -35,7 +35,7 @@ export function ThemeProvider({
 
         if (theme === "system") {
             const systemTheme = window.matchMedia(
-                "(prefers-color-scheme: dark)"
+                "(prefers-color-scheme: dark)",
             ).matches
                 ? "dark"
                 : "light";
@@ -62,6 +62,7 @@ export function ThemeProvider({
     );
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const useTheme = () => {
     const context = useContext(ThemeProviderContext);
 

examples/todo/src/basicComponents/ui/button.tsx

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

examples/todo/src/basicComponents/ui/checkbox.tsx

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

examples/todo/src/basicComponents/ui/input.tsx

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

examples/todo/src/basicComponents/ui/skeleton.tsx

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

examples/todo/src/basicComponents/ui/table.tsx

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

examples/todo/src/basicComponents/ui/toast.tsx

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

examples/todo/src/basicComponents/ui/toaster.tsx

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

examples/todo/src/basicComponents/ui/use-toast.ts

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

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

@@ -3,24 +3,32 @@ import { useState } from "react";
 import QRCode from "qrcode";
 
 import { useToast, Button } from "../basicComponents";
-import { CoValue } from "cojson";
+import { createInviteLink } from "jazz-react";
-import { Resolved, createInviteLink } from "jazz-react";
+import { CoValue } from "jazz-tools";
 
-export function InviteButton<T extends CoValue>({ value }: { value?: Resolved<T> }) {
+export function InviteButton<T extends CoValue>({
+    value,
+    valueHint,
+}: {
+    value?: T;
+    valueHint?: string;
+}) {
     const [existingInviteLink, setExistingInviteLink] = useState<string>();
     const { toast } = useToast();
 
     return (
-        value?.meta.group?.myRole() === "admin" && (
+        value?._owner?.myRole() === "admin" && (
             <Button
                 size="sm"
                 className="py-0"
-                disabled={!value.meta.group || !value.id}
+                disabled={!value._owner || !value.id}
                 variant="outline"
                 onClick={async () => {
                     let inviteLink = existingInviteLink;
-                    if (value.meta.group && value.id && !inviteLink) {
+                    if (value._owner && value.id && !inviteLink) {
-                        inviteLink = createInviteLink(value, "writer");
+                        inviteLink = createInviteLink(value, "writer", {
+                            valueHint,
+                        });
                         setExistingInviteLink(inviteLink);
                     }
                     if (inviteLink) {
@@ -33,7 +41,7 @@ export function InviteButton<T extends CoValue>({ value }: { value?: Resolved<T>
                                 description: (
                                     <img src={qr} className="w-20 h-20" />
                                 ),
-                            })
+                            }),
                         );
                     }
                 }}

examples/twit/README.md

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

examples/twit/src/1_dataModel.ts

@@ -1,64 +0,0 @@
-import { CoMap, CoList, Media, CoStream, Group, AccountMigration, EVERYONE, Profile } from 'cojson';
-
-export type Twit = CoMap<{
-  text?: string;
-  images?: ListOfImages['id'];
-  likes: LikeStream['id'];
-  replies: ReplyStream['id'];
-  isReplyTo?: Twit['id'];
-}>;
-
-export type ListOfImages = CoList<Media.ImageDefinition['id']>;
-export type LikeStream = CoStream<'❤️' | null>;
-export type ReplyStream = CoStream<Twit['id']>;
-
-export type ListOfTwits = CoList<Twit['id']>;
-export type ListOfProfiles = CoList<TwitProfile['id']>;
-export type StreamOfFollowers = CoStream<TwitProfile['id'] | null>;
-
-export type TwitProfile = Profile<
-  {
-    name: string;
-    bio: string;
-    avatar?: Media.ImageDefinition['id'];
-    twits: ListOfTwits['id'];
-    following: ListOfProfiles['id'];
-    followers: StreamOfFollowers['id'];
-    twitStyle?: { fontFamily: string; color: string };
-  }
->;
-
-export type TwitAccountRoot = CoMap<{
-  peopleWhoCanSeeMyTwits: Group['id'];
-  peopleWhoCanSeeMyFollows: Group['id'];
-  peopleWhoCanFollowMe: Group['id'];
-  peopleWhoCanInteractWithMe: Group['id'];
-}>;
-
-export const migration: AccountMigration<TwitProfile, TwitAccountRoot> = (account, profile) => {
-  if (!account.get('root')) {
-    const peopleWhoCanSeeMyTwits = account.createGroup();
-    const peopleWhoCanSeeMyFollows = account.createGroup();
-    const peopleWhoCanFollowMe = account.createGroup();
-    const peopleWhoCanInteractWithMe = account.createGroup();
-
-    peopleWhoCanFollowMe?.addMember(EVERYONE, 'writer');
-    peopleWhoCanSeeMyTwits?.addMember(EVERYONE, 'reader');
-    peopleWhoCanSeeMyFollows?.addMember(EVERYONE, 'reader');
-    peopleWhoCanInteractWithMe?.addMember(EVERYONE, 'writer');
-
-    const root = account.createMap<TwitAccountRoot>({
-      peopleWhoCanSeeMyTwits: peopleWhoCanSeeMyTwits.id,
-      peopleWhoCanSeeMyFollows: peopleWhoCanSeeMyFollows.id,
-      peopleWhoCanFollowMe: peopleWhoCanFollowMe.id,
-      peopleWhoCanInteractWithMe: peopleWhoCanInteractWithMe.id
-    });
-
-    account.set('root', root.id);
-
-    profile.set('twits', peopleWhoCanSeeMyTwits.createList<ListOfTwits>().id, 'trusting');
-    profile.set('following', peopleWhoCanSeeMyFollows.createList<ListOfProfiles>().id, 'trusting');
-    profile.set('followers', peopleWhoCanFollowMe.createStream<StreamOfFollowers>().id, 'trusting');
-    console.log('MIGRATION SUCCESSFUL!');
-  }
-};

examples/twit/src/3_ChronoFeed.tsx

@@ -1,35 +0,0 @@
-import { useMemo } from 'react';
-import { useJazz } from 'jazz-react';
-import { TwitAccountRoot, TwitProfile } from './1_dataModel.ts';
-import { CreateTwitForm } from './6_CreateTwitForm.tsx';
-import { TwitComponent } from './4_TwitComponent.tsx';
-import { MainH1 } from './basicComponents/index.tsx';
-
-export function ChronoFeed() {
-  const { me } = useJazz<TwitProfile, TwitAccountRoot>();
-
-  const myTwits = me.profile?.twits;
-
-  const twitsFromFollows = useMemo(
-    () => me.profile?.following?.flatMap(follow => follow?.twits || []) || [],
-    [me.profile?.following]
-  );
-
-  const allTwitsSorted = useMemo(
-    () =>
-      [...(myTwits || []), ...twitsFromFollows]
-        .flatMap(tw => (tw ? (tw.isReplyTo ? [] : tw) : []))
-        .sort((a, b) => (b.meta.edits.text?.at?.getTime() || 0) - (a.meta.edits.text?.at?.getTime() || 0)),
-    [myTwits, twitsFromFollows]
-  );
-
-  return (
-    <div className="flex flex-col items-stretch">
-      <CreateTwitForm className="mb-10" />
-      <MainH1>From people you follow</MainH1>
-      {allTwitsSorted?.map(twit => (
-        <TwitComponent twit={twit} key={twit.id} />
-      ))}
-    </div>
-  );
-}

generateDocs.ts

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

homepage/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:18-slim
+
+COPY node_modules ./node_modules
+COPY homepage/.next/standalone ./homepage
+COPY homepage/.next/static ./homepage/.next/static
+
+EXPOSE 3001
+
+ENV PORT 3001
+
+CMD ["node", "homepage/server.js"]

homepage/homepage-jazz/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

homepage/homepage-jazz/app/globals.css

@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}

homepage/homepage-jazz/app/layout.tsx

@@ -1,22 +0,0 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}