Release

New unified API

.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-nodejs-ws",
+            "cojson-storage-indexeddb",
+            "cojson-storage-sqlite"
+        ]
+    ],
+    "access": "public",
+    "baseBranch": "main",
+    "updateInternalDependencies": "patch",
+    "ignore": []
+}

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

@@ -7,7 +7,53 @@ on:
     branches: [ "main" ]
 
 jobs:
-  build-and-deploy:
+  build-examples:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        example: ["chat", "pets", "todo"]
+        # example: ["twit", "chat", "counter-js-auth0", "pets", "twit", "file-drop", "inspector"]
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 8
+
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+        cache: 'pnpm'
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v2
+      with:
+        registry: ghcr.io
+        username: gardencmp
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Pnpm Build
+      run: |
+        pnpm install
+        pnpm turbo build;
+      working-directory: ./examples/${{ matrix.example }}
+
+    - name: Docker Build & Push
+      uses: docker/build-push-action@v4
+      with:
+        context: ./examples/${{ matrix.example }}
+        push: true
+        tags: ghcr.io/gardencmp/${{github.event.repository.name}}-example-${{ matrix.example }}:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+
+  build-homepage:
     runs-on: ubuntu-latest
 
     steps:
@@ -15,42 +61,57 @@ jobs:
       with:
         submodules: true
 
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 8
+
     - uses: actions/setup-node@v3
       with:
-        node-version: 18
-        cache: 'yarn'
-        cache-dependency-path: yarn.lock
-    - name: Nuke Workspace
-      run: |
-        rm package.json yarn.lock;
-    - name: Yarn Build
-      run: |
-        yarn install --frozen-lockfile;
-        yarn build;
-      working-directory: ./examples/todo
+        node-version: 16
+        cache: 'pnpm'
 
-    - uses: satackey/action-docker-layer-caching@v0.0.11
-      continue-on-error: true
-      with:
-        key: docker-layer-caching-${{ github.workflow }}-{hash}
-        restore-keys: |
-          docker-layer-caching-${{ github.workflow }}-
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
 
     - name: Login to GitHub Container Registry
-      uses: docker/login-action@v1
+      uses: docker/login-action@v2
       with:
         registry: ghcr.io
         username: gardencmp
         password: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Docker Build & Push
+    - name: Pnpm Install (root)
       run: |
-        export DOCKER_TAG=ghcr.io/gardencmp/jazz-example-todo:${{github.head_ref || github.ref_name}}-${{github.sha}}-$(date +%s) ;
-        docker build . --file Dockerfile --tag $DOCKER_TAG;
-        docker push $DOCKER_TAG;
-        echo "DOCKER_TAG=$DOCKER_TAG" >> $GITHUB_ENV
-      working-directory: ./examples/todo
+        pnpm install
+      working-directory: .
 
+    - name: Pnpm Install & Build (homepage)
+      run: |
+        pnpm install
+        pnpm build;
+      working-directory: ./homepage/homepage
+
+    - name: Docker Build & Push
+      uses: docker/build-push-action@v4
+      with:
+        context: ./homepage
+        push: true
+        tags: ghcr.io/gardencmp/${{github.event.repository.name}}-homepage-jazz:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+
+  deploy-examples:
+    runs-on: ubuntu-latest
+    needs: build-examples
+    strategy:
+      matrix:
+        example: ["chat", "pets", "todo"]
+        # example: ["twit", "chat", "counter-js-auth0", "pets", "twit", "file-drop", "inspector"]
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
     - uses: gacts/install-nomad@v1
     - name: Tailscale
       uses: tailscale/github-action@v1
@@ -69,9 +130,42 @@ jobs:
 
         export DOCKER_USER=gardencmp;
         export DOCKER_PASSWORD=${{ secrets.DOCKER_PULL_PAT }};
-        export DOCKER_TAG=${{ env.DOCKER_TAG }};
+        export DOCKER_TAG=ghcr.io/gardencmp/${{github.event.repository.name}}-example-${{ matrix.example }}:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}};
 
         envsubst '${DOCKER_USER} ${DOCKER_PASSWORD} ${DOCKER_TAG} ${BRANCH_SUFFIX} ${BRANCH_SUBDOMAIN}' < job-template.nomad > job-instance.nomad;
         cat job-instance.nomad;
-        NOMAD_ADDR='http://control1v2-london:4646' nomad job run job-instance.nomad;
-      working-directory: ./examples/todo
+        NOMAD_ADDR=${{ secrets.NOMAD_ADDR }} nomad job run job-instance.nomad;
+      working-directory: ./examples/${{ matrix.example }}
+
+  deploy-homepage:
+    runs-on: ubuntu-latest
+    needs: build-homepage
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
+    - uses: gacts/install-nomad@v1
+    - name: Tailscale
+      uses: tailscale/github-action@v1
+      with:
+        authkey: ${{ secrets.TAILSCALE_AUTHKEY }}
+
+    - name: Deploy on Nomad
+      run: |
+        if [ "${{github.ref_name}}" == "main" ]; then
+          export BRANCH_SUFFIX="";
+          export BRANCH_SUBDOMAIN="";
+        else
+          export BRANCH_SUFFIX=-${{github.head_ref || github.ref_name}};
+          export BRANCH_SUBDOMAIN=${{github.head_ref || github.ref_name}}.;
+        fi
+
+        export DOCKER_USER=gardencmp;
+        export DOCKER_PASSWORD=${{ secrets.DOCKER_PULL_PAT }};
+        export DOCKER_TAG=ghcr.io/gardencmp/${{github.event.repository.name}}-homepage-jazz:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}};
+
+        envsubst '${DOCKER_USER} ${DOCKER_PASSWORD} ${DOCKER_TAG} ${BRANCH_SUFFIX} ${BRANCH_SUBDOMAIN}' < job-template.nomad > job-instance.nomad;
+        cat job-instance.nomad;
+        NOMAD_ADDR=${{ secrets.NOMAD_ADDR }} nomad job run job-instance.nomad;
+      working-directory: ./homepage

.gitignore

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

.husky/pre-commit

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

.vscode/settings.json

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

README.md

@@ -1,488 +1,12 @@
-# Jazz - instant sync
+# Jazz - Instant sync
 
-Homepage: [jazz.tools](https://jazz.tools) — [Discord](https://discord.gg/utDMjHYg42)
 
-Jazz is an open-source toolkit for *secure telepathic data.*
 
-- Ship faster & simplify your frontend and backend
-- Get cross-device sync, real-time collaboration & offline support for free
+ **Jazz is an open-source toolkit for building apps with *distributed state.***
 
-[Jazz Global Mesh](https://jazz.tools/mesh) is serverless sync & storage for Jazz apps. (currently free!)
+- 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)
 
-
-
-## What is Secure Telepathic Data?
-
-**Telepathic** means:
-
-- **Read and write data as if it was local,** from anywhere in your app.
-- **Always have that data synced, instantly.** Across devices of the same user — or to other users (coming soon: to your backend, workers, etc.)
-
-**Secure** means:
-
-- **Fine-grained, role-based permissions are *baked into* your data.**
-- **Permissions are enforced everywhere, locally.** (using cryptography instead of through an API)
-- Roles can be changed dynamically, supporting changing teams, invite links and more.
-
-## How to build an app with Jazz?
-
-### Building a new app, completely with Jazz
-
-It's still a bit early, but these are the rough steps:
-
-1. Define your data model with [CoJSON Values](#cojson).
-2. Implement permission logic using [CoJSON Groups](#group).
-3. Hook up a user interface with [jazz-react](#jazz-react).
-
-The best example is currently the [Todo List app](#example-app-todo-list).
-
-### Gradually adding Jazz to an existing app
-
-Coming soon: Jazz will support gradual adoption by integrating with your existing UI, auth and database.
-
-## Example App: Todo List
-
-The best example of Jazz is currently the Todo List app.
-
-- Live version: https://example-todo.jazz.tools
-- Source code: [`./examples/todo`](./examples/todo). See the README there for a walk-through and running instructions.
-
-# API Reference
-
-Note: Since it's early days, this is the only source of documentation so far.
-
-If you want to build something with Jazz, [join the Jazz Discord](https://discord.gg/utDMjHYg42) for encouragement and help!
-
-## Overview: Main Packages
-
-**`cojson`**
-
-A library implementing abstractions and protocols for "Collaborative JSON". This will soon be standardized and forms the basis of secure telepathic data.
-
-**`jazz-react`**
-
-Provides you with everything you need to build react apps around CoJSON, including reactive hooks for telepathic data, local IndexedDB persistence, support for different auth providers and helpers for simple invite links for CoJSON groups.
-
-### Supporting packages
-<small>
-
-**`cojson-simple-sync`**
-
-A generic CoJSON sync server you can run locally if you don't want to use Jazz Global Mesh (the default sync backend, at `wss://sync.jazz.tools`)
-
-**`jazz-browser`**
-
-framework-agnostic primitives that allow you to use CoJSON in the browser. Used to implement `jazz-react`, will be used to implement bindings for other frameworks in the future.
-
-**`jazz-react-auth-local`** (and `jazz-browser-auth-local`): A simple auth provider that stores cryptographic keys on user devices using WebAuthentication/Passkeys. Lets you build Jazz apps completely without a backend, with end-to-end encryption by default.
-
-**`jazz-storage-indexeddb`**
-
-Provides local, offline-capable persistence. Included and enabled in `jazz-react` by default.
-</small>
-
-## `CoJSON`
-
-CoJSON is the core implementation of secure telepathic data. It provides abstractions for Collaborative JSON values ("`CoValues`"), groups for permission management and a protocol for syncing between nodes. Our goal is to standardise CoJSON soon and port it to other languages and platforms.
-
----
-
-### `LocalNode`
-
-A `LocalNode` represents a local view of a set of loaded `CoValue`s, from the perspective of a particular account (or primitive cryptographic agent).
-
-A `LocalNode` can have peers that it syncs to, for example some form of local persistence, or a sync server, such as `sync.jazz.tools` (Jazz Global Mesh).
-
-You typically get hold of a `LocalNode` using `jazz-react`'s `useJazz()`:
-
-```typescript
-const { localNode } = useJazz();
-```
-
-#### `LocalNode.load(id)`
-```typescript
-load<T extends ContentType>(id: CoID<T>): Promise<T>
-```
-
-Loads a CoValue's content, syncing from peers as necessary and resolving the returned promise once a first version has been loaded. See `ContentType.subscribe()` and `useTelepathicData` for listening to subsequent updates to the CoValue.
-
-#### `LocalNode.loadProfile(id)`
-```typescript
-loadProfile(accountID: AccountID): Promise<Profile>
-```
-
-Loads a profile associated with an account. `Profile` is at least a `CoMap<{string: name}>`, but might contain other, app-specific properties.
-
-#### `LocalNode.acceptInvite(valueOrGroup, inviteSecret)`
-```typescript
-acceptInvite<T extends ContentType>(
-    valueOrGroup: CoID<T>,
-    inviteSecret: InviteSecret
-): Promise<void>
-```
-
-Accepts an invite for a group, or infers the group if given the `CoID` of a value owned by that group. Resolves upon successful joining of that group, at which point you should be able to `LocalNode.load` the value.
-
-Invites can be created with `Group.createInvite(role)`.
-
-#### `LocalNode.createGroup()`
-```typescript
-createGroup(): Group
-```
-
-Creates a new group (with the current account as the group's first admin).
-
----
-
-### `Group`
-
-A CoJSON group manages permissions of its members. A `Group` object exposes those capabilities and allows you to create new CoValues owned by that group.
-
-(Internally, a `Group` is also just a `CoMap`, mapping member accounts to roles and containing some state management for making cryptographic keys available to current members)
-
-#### `Group.id`
-
-Returns the `CoID` of the `Group`.
-
-#### `Group.roleOf(accountID)`
-
-```typescript
-roleOf(accountID: AccountID): "reader" | "writer" | "admin" | undefined
-```
-
-Returns the current role of a given account.
-
-#### `Group.myRole()`
-
-```typescript
-myRole(accountID: AccountID): "reader" | "writer" | "admin" | undefined
-```
-
-Returns the role of the current account in the group.
-
-#### `Group.addMember(accountID, role)`
-
-```typescript
-addMember(
-  accountID: AccountID,
-  role:  "reader" | "writer" | "admin"
-)
-```
-
-Directly grants a new member a role in the group. The current account must be an admin to be able to do so. Throws otherwise.
-
-#### `Group.createInvite(role)`
-
-```typescript
-createInvite(role: "reader" | "writer" | "admin"): InviteSecret
-```
-
-Creates an invite for new members to indirectly join the group, allowing them to grant themselves the specified role with the InviteSecret (a string starting with "inviteSecret_") - use `LocalNode.acceptInvite()` for this purpose.
-
-#### `Group.removeMember(accountID)`
-
-```typescript
-removeMember(accountID: AccountID)
-```
-
-Strips the specified member of all roles (preventing future writes) and rotates the read encryption key for that group (preventing reads of new content, including in covalues owned by this group)
-
-#### `Group.createMap(meta?)`
-```typescript
-createMap<M extends CoMap<{ [key: string]: JsonValue }, JsonObject | null>>(
-  meta?: M["meta"]
-): M
-```
-
-Creates a new `CoMap` within this group, with the specified specialized `CoMap` type `M` and optional static metadata.
-
-#### `Group.createList(meta?)`
-```typescript
-createList<L extends CoList<JsonValue, JsonObject | null>>(
-  meta?: L["meta"]
-): L
-```
-
-Creates a new `CoList` within this group, with the specified specialized `CoList` type `L` and optional static metadata.
-
-#### `Group.createStream(meta?)` (coming soon)
-#### `Group.createStatic(meta)` (coming soon)
-
----
-### `CoValue` ContentType: `CoMap`
-
-```typescript
-class CoMap<
-    M extends { [key: string]: JsonValue; },
-    Meta extends JsonObject | null = null,
->
-```
-
-#### `CoMap.id`
-
-```typescript
-id: CoID<CoMap<M, Meta>>
-```
-
-Returns the CoMap's (precisely typed) `CoID`
-
-#### `CoMap.meta`
-
-```typescript
-meta: Meta
-```
-
-Returns the CoMap's (precisely typed) static metadata
-
-#### `CoMap.keys()`
-
-```typescript
-keys(): (keyof M & string)[]
-```
-
-#### `CoMap.get(key)`
-
-```typescript
-get<K extends keyof M>(key: K): M[K] | undefined
-```
-
-Returns the current value for the given key.
-
-#### `CoMap.whoEdited(key)`
-
-```typescript
-whoEdited<K extends keyof M>(key: K): AccountID | undefined
-```
-
-Returns the accountID of the last account to modify the value for the given key.
-
-#### `CoMap.toJSON()`
-
-```typescript
-toJSON(): JsonObject
-```
-
-Returns a JSON representation of the state of the CoMap.
-
-#### `CoMap.subscribe(listener)`
-
-```typescript
-subscribe(
-  listener: (coMap: CoMap<M, Meta>) => void
-): () => void
-```
-Lets you subscribe to future updates to this CoMap (whether made locally or by other users). Takes a listener function that will be called with the current state for each update. Returns an unsubscribe function.
-
-Used internally by `useTelepathicData()` for reactive updates on changes to a `CoMap`.
-
-#### `CoMap.edit(editable => {...})`
-
-```typescript
-edit(changer: (editable: WriteableCoMap<M, Meta>) => void): CoMap<M, Meta>
-```
-
-Lets you apply edits to a `CoMap`, inside the changer callback, which receives a `WriteableCoMap`. A `WritableCoMap` has all the same methods as a `CoMap`, but all edits made to it with `set` or `delete` are reflected in it immediately - so it behaves mutably, whereas a `CoMap` is always immutable (you need to use `subscribe` to receive new versions of it).
-
-```typescript
-export class WriteableCoMap<
-    M extends { [key: string]: JsonValue; },
-    Meta extends JsonObject | null = null,
-> extends CoMap<M, Meta>
-```
-
-#### `WritableCoMap.set(key, value)`
-
-```typescript
-set<K extends keyof M>(
-  key: K,
-  value: M[K],
-  privacy: "private" | "trusting" = "private"
-): void
-```
-
-Sets a new value for the given key.
-
-If `privacy` is `"private"` **(default)**, both `key` and `value` are encrypted in the transaction, only readable by other members of the group this `CoMap` belongs to. Not even sync servers can see the content in plaintext.
-
-If `privacy` is `"trusting"`, both `key` and `value` are stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers.
-
-#### `WritableCoMap.delete(key)`
-
-```typescript
-delete<K extends keyof M>(
-  key: K,
-  privacy: "private" | "trusting" = "private"
-): void
-```
-
-Deletes the value for the given key (setting it to undefined).
-
-If `privacy` is `"private"` **(default)**, `key` is encrypted in the transaction, only readable by other members of the group this `CoMap` belongs to. Not even sync servers can see the content in plaintext.
-
-If `privacy` is `"trusting"`, `key` is stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers.
-
----
-### `CoValue` ContentType: `CoList`
-
-```typescript
-class CoList<
-    T extends JsonValue,
-    Meta extends JsonObject | null = null
->
-```
-
-#### `CoList.id`
-
-```typescript
-id: CoID<CoList<T, Meta>>
-```
-
-Returns the CoList's (precisely typed) `CoID`
-
-#### `CoList.meta`
-
-```typescript
-meta: Meta
-```
-
-Returns the CoList's (precisely typed) static metadata
-
-### `CoList.asArray()`
-
-```typescript
-asArray(): T[]
-```
-
-Returns the current items in the CoList as an array.
-
-### `CoList.toJSON()`
-
-```typescript
-toJSON(): T[]
-```
-
-Returns the current items in the CoList as an array. (alias of asArray)
-
-#### `CoList.whoInserted(idx)`
-
-```typescript
-whoInserted(idx: number): AccountID | undefined
-```
-
-Returns the accountID of the account that inserted value at the given index.
-
-#### `CoList.subscribe(listener)`
-
-```typescript
-subscribe(
-  listener: (coMap: CoList<T, Meta>) => void
-): () => void
-```
-Lets you subscribe to future updates to this CoList (whether made locally or by other users). Takes a listener function that will be called with the current state for each update. Returns an unsubscribe function.
-
-Used internally by `useTelepathicData()` for reactive updates on changes to a `CoList`.
-
-#### `CoList.edit(editable => {...})`
-
-```typescript
-edit(changer: (editable: WriteableCoList<T, Meta>) => void): CoList<T, Meta>
-```
-
-Lets you apply edits to a `CoList`, inside the changer callback, which receives a `WriteableCoList`. A `WritableCoList` has all the same methods as a `CoList`, but all edits made to it with `append`, `push`, `prepend` or `delete` are reflected in it immediately - so it behaves mutably, whereas a `CoList` is always immutable (you need to use `subscribe` to receive new versions of it).
-
-```typescript
-export class WriteableCoList<
-    T extends JsonValue,
-    Meta extends JsonObject | null = null,
-> extends CoList<T, Meta>
-```
-
-#### `WritableCoList.append(after, value)`
-
-```typescript
-append(
-  after: number,
-  value: T,
-  privacy: "private" | "trusting" = "private"
-): void
-```
-
-Appends a new item after index `after`.
-
-If `privacy` is `"private"` **(default)**, both `value` is encrypted in the transaction, only readable by other members of the group this `CoList` belongs to. Not even sync servers can see the content in plaintext.
-
-If `privacy` is `"trusting"`, both `value` is stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers.
-
-#### `WritableCoList.prepend(after, value)`
-
-```typescript
-prepend(
-  before: number,
-  value: T,
-  privacy: "private" | "trusting" = "private"
-): void
-```
-
-Prepends a new item before index `before`.
-
-If `privacy` is `"private"` **(default)**, both `value` is encrypted in the transaction, only readable by other members of the group this `CoList` belongs to. Not even sync servers can see the content in plaintext.
-
-If `privacy` is `"trusting"`, both `value` is stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers.
-
-#### `WritableCoList.push(value)`
-
-```typescript
-push(
-  value: T,
-  privacy: "private" | "trusting" = "private"
-): void
-```
-
-Pushes a new item to the end of the list.
-
-If `privacy` is `"private"` **(default)**, both `value` is encrypted in the transaction, only readable by other members of the group this `CoList` belongs to. Not even sync servers can see the content in plaintext.
-
-If `privacy` is `"trusting"`, both `value` is stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers.
-
-#### `WritableCoList.delete(at)`
-
-```typescript
-delete(
-    at: number,
-    privacy: "private" | "trusting" = "private"
-): void
-```
-
-Deletes the item at index `at` from the list.
-
-If `privacy` is `"private"` **(default)**, the fact of this deletion is encrypted in the transaction, only readable by other members of the group this `CoList` belongs to. Not even sync servers can see the content in plaintext.
-
-If `privacy` is `"trusting"`, the fact of this deletion is stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers.
-
----
-### `CoValue` ContentType: `CoStream` (not yet implemented)
-
----
-### `CoValue` ContentType: `Static` (not yet implemented)
----
-
-## `jazz-react`
----
-### `<WithJazz>`
-
-Not yet documented, see [`examples/todo`](./examples/todo/) for now
-
----
-### `useJazz()`
-
-Not yet documented, see [`examples/todo`](./examples/todo/) for now
-
----
-### `useTelepathicData(coID)`
-
-Not yet documented, see [`examples/todo`](./examples/todo/) for now
-
----
-### `useProfile(accountID)`
-
-Not yet documented, see [`examples/todo`](./examples/todo/) for now
+Copyright 2024 &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/.gitignore

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

examples/chat/CHANGELOG.md

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

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

examples/chat/README.md

@@ -0,0 +1,42 @@
+# Jazz Chat Example
+
+Live version: https://example-chat.jazz.tools
+
+## Installing & running the example locally
+
+(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+
+Start by checking out `jazz`
+```bash
+git clone https://github.com/gardencmp/jazz.git
+cd jazz/examples/chat
+pnpm pack --pack-destination /tmp
+mkdir -p ~/jazz-examples/chat # or any other directory
+tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat
+cd ~/jazz-examples/chat
+```
+
+This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
+
+Install dependencies:
+
+```bash
+pnpm install
+```
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/chat/index.html

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

examples/chat/job-template.nomad

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

examples/chat/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "jazz-example-chat",
+  "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",
+    "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/postcss.config.js

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

examples/chat/src/app.tsx

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

examples/chat/src/chatScreen.tsx

@@ -0,0 +1,42 @@
+import { ID } from 'jazz-tools';
+import { Chat, Message, useCoState } from './app.tsx';
+
+export function ChatScreen(props: { chatID: ID<Chat> }) {
+  const chat = useCoState(Chat, props.chatID, [{}]);
+
+  return chat ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
+    {chat.length > 0
+      ? chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
+      : <div className='m-auto text-sm'>(Empty chat)</div>}
+    <ChatInput onSubmit={(text) => {
+      chat.push(
+        Message.create({ text }, { owner: chat._owner })
+      );
+    }} />
+  </div> : <div>Loading...</div>;
+}
+
+function ChatBubble(props: { msg: Message }) {
+  const lastEdit = props.msg._edits.text;
+  const align = lastEdit.by?.isMe ? 'items-end' : 'items-start';
+
+  return <div className={`${align} flex flex-col`}>
+    <div className='rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]'>
+      { props.msg.text }
+    </div>
+    <div className='text-xs text-neutral-500 ml-2'>
+      { lastEdit.by?.profile?.name }{' '}
+      { lastEdit.madeAt?.toLocaleTimeString() }
+    </div>
+  </div>;
+}
+
+function ChatInput(props: { onSubmit: (text: string) => void }) {
+  return <input className='rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 dark:border-stone-700'
+    placeholder='Type a message and press Enter'
+    onKeyDown={({ key, currentTarget: input }) => {
+      if (key !== 'Enter' || !input.value) return;
+      props.onSubmit(input.value);
+      input.value = '';
+    }} />;
+}

examples/chat/src/index.css

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

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

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

examples/chat/tailwind.config.js

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

examples/chat/tsconfig.json

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

examples/chat/tsconfig.node.json

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

examples/chat/vite.config.ts

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

examples/pets/.eslintrc.cjs

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

examples/pets/.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/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,482 @@
+# jazz-example-pets
+
+## 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/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/pets/README.md

@@ -0,0 +1,42 @@
+# Jazz Rate-My-Pet List Example
+
+Live version: https://example-pets.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/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 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/pets/components.json

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

examples/pets/index.html

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

examples/pets/job-template.nomad

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

examples/pets/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "jazz-example-pets",
+  "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": "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",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@types/qrcode": "^1.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "jazz-browser-media-images": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "lucide-react": "^0.274.0",
+    "qrcode": "^1.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "uniqolor": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

examples/pets/postcss.config.js

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

examples/pets/src/1_schema.ts

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

examples/pets/src/2_main.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { Link, RouterProvider, createHashRouter } from "react-router-dom";
+import "./index.css";
+
+import { createJazzReactContext, PasskeyAuth } from "jazz-react";
+
+import {
+    Button,
+    ThemeProvider,
+    TitleAndLogo,
+} from "./basicComponents/index.ts";
+import { PrettyAuthUI } from "./components/Auth.tsx";
+import { NewPetPostForm } from "./3_NewPetPostForm.tsx";
+import { RatePetPostUI } from "./4_RatePetPostUI.tsx";
+import { PetAccount, PetPost } from "./1_schema.ts";
+
+/** Walkthrough: The top-level provider `<WithJazz/>`
+ *
+ *  This shows how to use the top-level provider `<WithJazz/>`,
+ *  which provides the rest of the app with a `LocalNode` (used through `useJazz` later),
+ *  based on `LocalAuth` that uses PassKeys (aka WebAuthn) to store a user's account secret
+ *  - no backend needed. */
+
+const appName = "Jazz Rate My Pet Example";
+
+const auth = PasskeyAuth<PetAccount>({
+    appName,
+    Component: PrettyAuthUI,
+    accountSchema: PetAccount,
+});
+
+const Jazz = createJazzReactContext({
+    auth,
+    peer: "wss://mesh.jazz.tools/?key=you@example.com",
+});
+// 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">
+                <Jazz.Provider>
+                    <App />
+                </Jazz.Provider>
+            </div>
+        </ThemeProvider>
+    </React.StrictMode>,
+);
+
+/** Walkthrough: Creating pet posts & routing in `<App/>`
+ *
+ *  <App> is the main app component, handling client-side routing based
+ *  on the CoValue ID (CoID) of our PetPost, stored in the URL hash
+ *  - which can also contain invite links.
+ */
+
+export default function App() {
+    const { logOut } = useAccount();
+
+    const router = createHashRouter([
+        {
+            path: "/",
+            element: <PostOverview />,
+        },
+        {
+            path: "/new",
+            element: <NewPetPostForm />,
+        },
+        {
+            path: "/pet/:petPostId",
+            element: <RatePetPostUI />,
+        },
+        {
+            path: "/invite/*",
+            element: <p>Accepting invite...</p>,
+        },
+    ]);
+
+    useAcceptInvite({
+        invitedObjectSchema: PetPost,
+        onAccept: (petPostID) => router.navigate("/pet/" + petPostID),
+    });
+
+    return (
+        <>
+            <RouterProvider router={router} />
+
+            <Button
+                onClick={() => router.navigate("/").then(logOut)}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </>
+    );
+}
+
+export function PostOverview() {
+    const { me } = useAccount();
+
+    const myPosts = me.root?.posts;
+
+    return (
+        <>
+            {myPosts?.length ? (
+                <>
+                    <h1>My posts</h1>
+                    {myPosts.map(
+                        (post) =>
+                            post && (
+                                <Link key={post.id} to={"/pet/" + post.id}>
+                                    {post.name}
+                                </Link>
+                            ),
+                    )}
+                </>
+            ) : undefined}
+            <Link to="/new">New post</Link>
+        </>
+    );
+}

examples/pets/src/3_NewPetPostForm.tsx

@@ -0,0 +1,106 @@
+import { ChangeEvent, useCallback, useState } from "react";
+import { useNavigate } from "react-router";
+import { createImage } from "jazz-browser-media-images";
+
+import { PetPost, PetReactions } from "./1_schema";
+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
+ */
+
+class PartialPetPost extends CoMap {
+    name = co.string;
+    image = co.ref(ImageDefinition, { optional: true });
+    reactions = co.ref(PetReactions);
+}
+
+export function NewPetPostForm() {
+    const { me } = useAccount();
+    const navigate = useNavigate();
+
+    const [newPostId, setNewPostId] = useState<ID<PartialPetPost> | undefined>(
+        undefined,
+    );
+
+    const newPetPost = useCoState(PartialPetPost, newPostId);
+
+    const onChangeName = useCallback(
+        (name: string) => {
+            if (newPetPost) {
+                newPetPost.name = name;
+            } else {
+                const petPostGroup = Group.create({ owner: me });
+                const petPost = PartialPetPost.create(
+                    {
+                        name,
+                        reactions: PetReactions.create([], { owner: me }),
+                    },
+                    { owner: petPostGroup },
+                );
+
+                setNewPostId(petPost.id);
+            }
+        },
+        [me, newPetPost],
+    );
+
+    const onImageSelected = useCallback(
+        async (event: ChangeEvent<HTMLInputElement>) => {
+            if (!newPetPost || !event.target.files) return;
+
+            const image = await createImage(event.target.files[0], {
+                owner: newPetPost._owner,
+            });
+
+            newPetPost.image = image;
+        },
+        [newPetPost],
+    );
+
+    const onSubmit = useCallback(() => {
+        if (!newPetPost) return;
+        const myPosts = me.root?.posts;
+
+        if (!myPosts) {
+            throw new Error("No posts list found");
+        }
+
+        myPosts.push(newPetPost as PetPost);
+
+        navigate("/pet/" + newPetPost.id);
+    }, [me.root?.posts, newPetPost, navigate]);
+
+    return (
+        <div className="flex flex-col gap-10">
+            <p>Share your pet with friends!</p>
+            <Input
+                type="text"
+                placeholder="Pet Name"
+                className="text-3xl py-6"
+                onChange={(event) => onChangeName(event.target.value)}
+                value={newPetPost?.name || ""}
+            />
+
+            {newPetPost?.image ? (
+                <ProgressiveImg image={newPetPost.image}>
+                    {({ src }) => (
+                        <img className="w-80 max-w-full rounded" src={src} />
+                    )}
+                </ProgressiveImg>
+            ) : (
+                <Input
+                    type="file"
+                    disabled={!newPetPost?.name}
+                    onChange={onImageSelected}
+                />
+            )}
+
+            {newPetPost?.name && newPetPost?.image && (
+                <Button onClick={onSubmit}>Submit Post</Button>
+            )}
+        </div>
+    );
+}

examples/pets/src/4_RatePetPostUI.tsx

@@ -0,0 +1,120 @@
+import { useParams } from "react-router";
+
+import { PetPost, PetReactions, ReactionTypes } from "./1_schema";
+
+import { ShareButton } from "./components/ShareButton";
+import { Button, Skeleton } from "./basicComponents";
+import uniqolor from "uniqolor";
+import { ID } from "jazz-tools";
+import { useCoState } from "./2_main";
+import { ProgressiveImg } from "jazz-react";
+
+/** Walkthrough: TODO
+ */
+
+const reactionEmojiMap: {
+    [reaction in (typeof ReactionTypes)[number]]: string;
+} = {
+    aww: "😍",
+    love: "❤️",
+    haha: "😂",
+    wow: "😮",
+    tiny: "🐥",
+    chonkers: "🐘",
+};
+
+export function RatePetPostUI() {
+    const petPostID = useParams<{ petPostId: ID<PetPost> }>().petPostId;
+
+    const petPost = useCoState(PetPost, petPostID);
+
+    return (
+        <div className="flex flex-col gap-8">
+            <div className="flex justify-between">
+                <h1 className="text-3xl font-bold">{petPost?.name}</h1>
+                <ShareButton petPost={petPost} />
+            </div>
+
+            <ProgressiveImg image={petPost?.image}>
+                {({ src }) => (
+                    <img className="w-80 max-w-full rounded" src={src} />
+                )}
+            </ProgressiveImg>
+
+            <div className="flex justify-between max-w-xs flex-wrap">
+                {ReactionTypes.map((reactionType) => (
+                    <Button
+                        key={reactionType}
+                        variant={
+                            petPost?.reactions?.byMe?.value === reactionType
+                                ? "default"
+                                : "outline"
+                        }
+                        onClick={() => {
+                            petPost?.reactions?.push(reactionType);
+                        }}
+                        title={`React with ${reactionType}`}
+                        className="text-2xl px-2"
+                    >
+                        {reactionEmojiMap[reactionType]}
+                    </Button>
+                ))}
+            </div>
+
+            {petPost?._owner.myRole() === "admin" && petPost.reactions && (
+                <ReactionOverview petReactions={petPost.reactions} />
+            )}
+        </div>
+    );
+}
+
+function ReactionOverview({ petReactions }: { petReactions: PetReactions }) {
+    return (
+        <div>
+            <h2>Reactions</h2>
+            <div className="flex flex-col gap-1">
+                {ReactionTypes.map((reactionType) => {
+                    const reactionsOfThisType = Object.values(
+                        petReactions,
+                    ).filter((entry) => entry.value === reactionType);
+
+                    if (reactionsOfThisType.length === 0) return null;
+
+                    return (
+                        <div
+                            className="flex gap-2 items-center"
+                            key={reactionType}
+                        >
+                            {reactionEmojiMap[reactionType]}{" "}
+                            {reactionsOfThisType.map((reaction, idx) =>
+                                reaction.by?.profile?.name ? (
+                                    <span
+                                        className="rounded-full py-0.5 px-2 text-xs"
+                                        style={uniqueColoring(reaction.by.id)}
+                                        key={reaction.by.id}
+                                    >
+                                        {reaction.by.profile.name}
+                                    </span>
+                                ) : (
+                                    <Skeleton
+                                        className="mt-1 w-[50px] h-[1em] rounded-full"
+                                        key={idx}
+                                    />
+                                ),
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+function uniqueColoring(seed: string) {
+    const darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    return {
+        color: uniqolor(seed, { lightness: darkMode ? 80 : 20 }).color,
+        background: uniqolor(seed, { lightness: darkMode ? 20 : 80 }).color,
+    };
+}

examples/pets/src/basicComponents/TitleAndLogo.tsx

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

examples/pets/src/basicComponents/index.ts

@@ -0,0 +1,7 @@
+export { Button } from "./ui/button";
+export { Input } from "./ui/input";
+export { Toaster } from "./ui/toaster";
+export { useToast } from "./ui/use-toast";
+export { Skeleton } from "./ui/skeleton";
+export { TitleAndLogo } from "./TitleAndLogo";
+export { ThemeProvider } from "./themeProvider";

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

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

examples/pets/src/basicComponents/themeProvider.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

examples/pets/src/components/Auth.tsx

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

examples/pets/src/components/ShareButton.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+
+import { PetPost } from "../1_schema";
+
+import { createInviteLink } from "jazz-react";
+import QRCode from "qrcode";
+
+import { useToast, Button } from "../basicComponents";
+
+export function ShareButton({ petPost }: { petPost?: PetPost }) {
+    const [existingInviteLink, setExistingInviteLink] = useState<string>();
+    const { toast } = useToast();
+
+    return (
+        petPost?._owner.myRole() === "admin" && (
+            <Button
+                size="sm"
+                className="py-0"
+                disabled={!petPost}
+                variant="outline"
+                onClick={async () => {
+                    let inviteLink = existingInviteLink;
+                    if (petPost && !inviteLink) {
+                        inviteLink = createInviteLink(petPost, "writer");
+                        setExistingInviteLink(inviteLink);
+                    }
+                    if (inviteLink) {
+                        const qr = await QRCode.toDataURL(inviteLink, {
+                            errorCorrectionLevel: "L",
+                        });
+                        navigator.clipboard.writeText(inviteLink).then(() =>
+                            toast({
+                                title: "Copied invite link to clipboard!",
+                                description: (
+                                    <img src={qr} className="w-20 h-20" />
+                                ),
+                            }),
+                        );
+                    }
+                }}
+            >
+                Share
+            </Button>
+        )
+    );
+}

examples/pets/src/index.css

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

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

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

examples/pets/tailwind.config.js

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

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

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

examples/pets/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/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,431 @@
+# jazz-example-todo
+
+## 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

@@ -2,355 +2,68 @@
 
 Live version: https://example-todo.jazz.tools
 
-More comprehensive guide coming soon, but these are the most important bits, with explanations:
+## Installing & running the example locally
 
-From `./src/main.tsx`
-
-```typescript
-// ...
-
-import { WithJazz } from "jazz-react";
-import { LocalAuth } from "jazz-react-auth-local";
-
-// ...
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-    <React.StrictMode>
-        <ThemeProvider>
-            <div className="flex items-center gap-2 justify-center mt-5">
-                <img src="jazz-logo.png" className="h-5" /> Jazz Todo List
-                Example
-            </div>
-            <WithJazz
-                auth={LocalAuth({
-                    appName: "Jazz Todo List Example",
-                    Component: PrettyAuthComponent,
-                })}
-            >
-                <App />
-            </WithJazz>
-        </ThemeProvider>
-    </React.StrictMode>
-);
+(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/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 shows how to use the top-level component `<WithJazz/>`, which provides the rest of the app with a `LocalNode` (used through `useJazz` later), based on `LocalAuth` that uses Passkeys to store a user's account secret - no backend needed.
+This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
 
-Let's move on to the main app code.
+Install dependencies:
 
----
-
-From `./src/App.tsx`
-
-```typescript
-// ...
-
-import { CoMap, CoID, AccountID } from "cojson";
-import {
-   consumeInviteLinkFromWindowLocation,
-   useJazz,
-   useProfile,
-   useTelepathicState,
-   createInviteLink
-} from "jazz-react";
-
-// ...
-
-type Task = CoMap<{ done: boolean; text: string }>;
-
-type ListOfTasks = CoList<CoID<Task>>;
-
-type TodoList = CoMap<{
-    title: string;
-    tasks: CoID<ListOfTasks>;
-}>;
-
-// ...
+```bash
+pnpm install
 ```
 
-First, we define our main data model of tasks and todo lists, using CoJSON's collaborative map and list types, `CoMap` & `CoList`.
+Start the dev server:
 
----
-
-```typescript
-// ...
-
-export default function App() {
-    const [listId, setListId] = useState<CoID<TodoList>>();
-
-    const { localNode, logOut } = useJazz();
-
-    useEffect(() => {
-        const listener = async () => {
-            const acceptedInvitation =
-                await consumeInviteLinkFromWindowLocation(localNode);
-
-            if (acceptedInvitation) {
-                setListId(acceptedInvitation.valueID as CoID<TodoList>);
-                window.location.hash = acceptedInvitation.valueID;
-                return;
-            }
-
-            setListId(window.location.hash.slice(1) as CoID<TodoList>);
-        };
-        window.addEventListener("hashchange", listener);
-        listener();
-
-        return () => {
-            window.removeEventListener("hashchange", listener);
-        };
-    }, [localNode]);
-
-    const createList = useCallback(
-        (title: string) => {
-            if (!title) return;
-            const listGroup = localNode.createGroup();
-            const list = listGroup.createMap<TodoList>();
-            const tasks = listGroup.createList<ListOfTasks>();
-
-            list.edit((list) => {
-                list.set("title", title);
-                list.set("tasks", tasks.id);
-            });
-
-            window.location.hash = list.id;
-        },
-        [localNode]
-    );
-
-    return (
-        <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-            {listId ? (
-                <TodoListComponent listId={listId} />
-            ) : (
-                <SubmittableInput
-                    onSubmit={createList}
-                    label="Create New List"
-                    placeholder="New list title"
-                />
-            )}
-            <Button
-                onClick={() => {
-                    window.location.hash = "";
-                    logOut();
-                }}
-                variant="outline"
-            >
-                Log Out
-            </Button>
-        </div>
-    );
-}
+```bash
+pnpm dev
 ```
 
-`<App>` is the main app component, handling client-side routing based on the CoValue ID (`CoID`) of our `TodoList`, stored in the URL hash - which can also contain invite links, which we intercept and use with `consumeInviteLinkFromWindowLocation`.
+## Structure
 
-`createList` is the first time we see CoJSON in action: using our `localNode` (which we got from `useJazz`), we first create a group for a new todo list (which allows us to set permissions later). Then, within that group, we create a new `CoMap<TodoListContent>` with `listGroup.createMap()`.
+- [`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_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
 
-We immediately start editing the created `list`. Within the edit callback, we can use the `set` function, to collaboratively set the key `title` to the initial title provided to `createList`.
+## Walkthrough
 
-If we have a current `listId` set, we render `<TodoListComponent>` with it, which we'll see next.
+### Main parts
 
-If we have no `listId` set, the user can use the displayed creation input to create (and open) their first list.
+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)
 
-```typescript
-export function TodoListComponent({ listId }: { listId: CoID<TodoList> }) {
-    const list = useTelepathicState(listId);
-    const tasks = useTelepathicState(list?.get("tasks"));
+3. Creating a new todo project: [`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx)
 
-    const createTask = (text: string) => {
-        if (!tasks || !text) return;
-        const task = tasks.group.createMap<Task>();
+4. Reactively rendering a todo project as a table, adding and editing tasks: [`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx)
 
-        task.edit((task) => {
-            task.set("text", text);
-            task.set("done", false);
-        });
+### Helpers
 
-        tasks.edit((tasks) => {
-            tasks.push(task.id);
-        });
-    };
-
-    return (
-        <div className="max-w-full w-4xl">
-            <div className="flex justify-between items-center gap-4 mb-4">
-                <h1>
-                    {list?.get("title") ? (
-                        <>
-                            {list.get("title")}{" "}
-                            <span className="text-sm">({list.id})</span>
-                        </>
-                    ) : (
-                        <Skeleton className="mt-1 w-[200px] h-[1em] rounded-full" />
-                    )}
-                </h1>
-                {list && <InviteButton list={list} />}
-            </div>
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead className="w-[40px]">Done</TableHead>
-                        <TableHead>Task</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {tasks &&
-                        tasks
-                            .asArray()
-                            .map((taskId) => (
-                                <TaskRow key={taskId} taskId={taskId} />
-                            ))}
-                    <TableRow key="new">
-                        <TableCell>
-                            <Checkbox className="mt-1" disabled />
-                        </TableCell>
-                        <TableCell>
-                            <SubmittableInput
-                                onSubmit={(taskText) => createTask(taskText)}
-                                label="Add"
-                                placeholder="New task"
-                                disabled={!list}
-                            />
-                        </TableCell>
-                    </TableRow>
-                </TableBody>
-            </Table>
-        </div>
-    );
-}
-```
-
-Here in `<TodoListComponent>`, we use `useTelepathicData()` for the first time, in this case to load the CoValue for our `TodoList` as well as the `ListOfTasks` referenced in it. `useTelepathicData()` 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!
-
-`createTask` is similar to `createList` we saw earlier, creating a new CoMap for a new task, and then adding it as an item to our `TodoList`'s `ListOfTasks`.
-
-As you can see, we iterate over the items of our `ListOfTasks` and render a `<TaskRow>` for each.
-
-Below all tasks, we render a simple input for adding a task.
-
----
-
-```typescript
-function TaskRow({ taskId }: { taskId: CoID<Task> }) {
-    const task = useTelepathicState(taskId);
-
-    return (
-        <TableRow>
-            <TableCell>
-                <Checkbox
-                    className="mt-1"
-                    checked={task?.get("done")}
-                    onCheckedChange={(checked) => {
-                        task?.edit((task) => {
-                            task.set("done", !!checked);
-                        });
-                    }}
-                />
-            </TableCell>
-            <TableCell>
-                <div className="flex flex-row justify-between items-center gap-2">
-                    <span className={task?.get("done") ? "line-through" : ""}>
-                        {task?.get("text") || (
-                            <Skeleton className="mt-1 w-[200px] h-[1em] rounded-full" />
-                        )}
-                    </span>
-                    <NameBadge accountID={task?.whoEdited("text")} />
-                </div>
-            </TableCell>
-        </TableRow>
-    );
-}
-```
-
-`<TaskRow>` uses `useTelepathicState()` as well, to granularly load and subscribe to changes for that particular task (the only thing we let the user change is the "done" status).
-
-We also use a `<NameBadge>` helper component to render the name of the author of the task, which we get by using the collaboration feature `whoEdited(key)` on our `Task` CoMap, which returns the accountID of the last account that changed a given key in the CoMap.
-
----
-
-```typescript
-function NameBadge({ accountID }: { accountID?: AccountID }) {
-    const profile = useProfile(accountID);
-
-    const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light";
-
-    const brightColor = uniqolor(accountID || "", { lightness: 80 }).color;
-    const darkColor = uniqolor(accountID || "", { lightness: 20 }).color;
-
-    return (
-        profile?.get("name") ? (
-            <span
-                className="rounded-full py-0.5 px-2 text-xs"
-                style={{
-                    color: theme == "light" ? darkColor : brightColor,
-                    background: theme == "light" ? brightColor : darkColor,
-                }}
-            >
-                {profile.get("name")}
-            </span>
-        ) : (
-            <Skeleton className="mt-1 w-[50px] h-[1em] rounded-full" />
-        )
-    );
-}
-```
-
-`<NameBadge>` uses `useProfile(accountID)`, which is a shorthand for loading an account's profile (which is always a `CoMap<{name: string}>`, but might have app-specific additional properties).
-
-In our case, we just display the profile name (which, by the way, is set by the `LocalAuth` provider when we first create an account).
-
----
-
-```typescript
-function InviteButton({ list }: { list: TodoList }) {
-    const [existingInviteLink, setExistingInviteLink] = useState<string>();
-    const { toast } = useToast();
-
-    return (
-        list.group.myRole() === "admin" && (
-            <Button
-                size="sm"
-                className="py-0"
-                disabled={!list}
-                variant="outline"
-                onClick={async () => {
-                    let inviteLink = existingInviteLink;
-                    if (list && !inviteLink) {
-                        inviteLink = createInviteLink(list, "writer");
-                        setExistingInviteLink(inviteLink);
-                    }
-                    if (inviteLink) {
-                        const qr = await QRCode.toDataURL(inviteLink, {
-                            errorCorrectionLevel: "L",
-                        });
-                        navigator.clipboard.writeText(inviteLink).then(() =>
-                            toast({
-                                title: "Copied invite link to clipboard!",
-                                description: (
-                                    <img src={qr} className="w-20 h-20" />
-                                ),
-                            })
-                        );
-                    }
-                }}
-            >
-                Invite
-            </Button>
-        )
-    );
-}
-```
-
-Last, we have a look at the `<InviteButton>` component, which we use inside `<TodoListComponent>`. It only becomes visible when the current user is an admin in the `TodoList`'s group. You can see how we can create an invite link using `createInviteLink(coValue, role)` that allows anyone who has it to join the group as a specified role (here, as a writer).
-
----
+- (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!
 
-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.
+## 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/todo/components.json

@@ -10,7 +10,7 @@
     "cssVariables": true
   },
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
+    "components": "@/basicComponents",
+    "utils": "@/basicComponents/lib/utils"
   }
 }

examples/todo/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/2_main.tsx"></script>
   </body>
 </html>

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.22",
+  "version": "0.0.66",
   "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,14 +21,16 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "^0.1.8",
-    "jazz-react-auth-local": "^0.1.8",
-    "lucide-react": "^0.265.0",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.6",
+    "tailwindcss-animate": "^1.0.7",
     "uniqolor": "^1.1.0"
   },
   "devDependencies": {
@@ -34,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(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/2_main.tsx

@@ -0,0 +1,132 @@
+import ReactDOM from "react-dom/client";
+import {
+    RouterProvider,
+    createHashRouter,
+    useNavigate,
+} from "react-router-dom";
+import "./index.css";
+
+import { createJazzReactContext, PasskeyAuth } from "jazz-react";
+
+import {
+    Button,
+    ThemeProvider,
+    TitleAndLogo,
+} from "./basicComponents/index.ts";
+import { PrettyAuthUI } from "./components/Auth.tsx";
+import { NewProjectForm } from "./3_NewProjectForm.tsx";
+import { ProjectTodoTable } from "./4_ProjectTodoTable.tsx";
+import { TodoAccount, TodoProject } from "./1_schema.ts";
+
+/**
+ * Walkthrough: The top-level provider `<Jazz.Provider/>`
+ *
+ * This shows how to use the top-level provider `<Jazz.Provider/>`,
+ * which provides the rest of the app with a controlled account (used through `useAccount` later).
+ * Here we use `PasskeyAuth`, which uses Passkeys (aka WebAuthn) to store a user's account secret
+ * - no backend needed.
+ *
+ * `<Jazz.Provider/>` also runs our account migration
+ */
+
+const appName = "Jazz Todo List Example";
+
+const auth = 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>
+    <ThemeProvider>
+        <TitleAndLogo name={appName} />
+        <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+            <Jazz.Provider>
+                <App />
+            </Jazz.Provider>
+        </div>
+    </ThemeProvider>,
+    // </React.StrictMode>
+);
+
+/**
+ * Routing in `<App/>`
+ *
+ * <App> is the main app component, handling client-side routing based
+ * on the CoValue ID (CoID) of our TodoProject, stored in the URL hash
+ * - which can also contain invite links.
+ */
+export default function App() {
+    // logOut logs out the AuthProvider passed to `<Jazz.Provider/>` above.
+    const { logOut } = useAccount();
+
+    const router = createHashRouter([
+        {
+            path: "/",
+            element: <HomeScreen />,
+        },
+        {
+            path: "/project/:projectId",
+            element: <ProjectTodoTable />,
+        },
+        {
+            path: "/invite/*",
+            element: <p>Accepting invite...</p>,
+        },
+    ]);
+
+    // `useAcceptInvite()` is a hook that accepts an invite link from the URL hash,
+    // and on success calls our callback where we navigate to the project that we were just invited to.
+    useAcceptInvite({
+        invitedObjectSchema: TodoProject,
+        forValueHint: "project",
+        onAccept: (projectID) => router.navigate("/project/" + projectID),
+    });
+
+    return (
+        <>
+            <RouterProvider router={router} />
+
+            <Button
+                onClick={() => router.navigate("/").then(logOut)}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </>
+    );
+}
+
+function HomeScreen() {
+    const { me } = useAccount({
+        root: { projects: [{}] },
+    });
+    const navigate = useNavigate();
+
+    return (
+        <>
+            {me?.root.projects.length ? <h1>My Projects</h1> : null}
+            {me?.root.projects.map((project) => {
+                return (
+                    <Button
+                        key={project.id}
+                        onClick={() => navigate("/project/" + project?.id)}
+                        variant="ghost"
+                    >
+                        {project.title}
+                    </Button>
+                );
+            })}
+            <NewProjectForm />
+        </>
+    );
+}
+
+/** Walkthrough: Continue with ./3_NewProjectForm.tsx */

examples/todo/src/3_NewProjectForm.tsx

@@ -0,0 +1,51 @@
+import { useCallback } from "react";
+
+import { ListOfTasks, TodoProject } from "./1_schema";
+
+import { SubmittableInput } from "./basicComponents";
+
+import { useNavigate } from "react-router";
+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 } = useAccount();
+    const navigate = useNavigate();
+
+    const createProject = useCallback(
+        (title: string) => {
+            if (!title) return;
+
+            // 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 = Group.create({ owner: me });
+
+            // Then we create an empty todo project within that group
+            const project = TodoProject.create(
+                {
+                    title,
+                    tasks: ListOfTasks.create([], { owner: projectGroup }),
+                },
+                { owner: projectGroup },
+            );
+
+            me.root?.projects?.push(project);
+
+            navigate("/project/" + project.id);
+        },
+        [me, navigate],
+    );
+
+    return (
+        <SubmittableInput
+            onSubmit={createProject}
+            label="Create New Project"
+            placeholder="New project title"
+        />
+    );
+}
+
+/** Walkthrough: continue with ./4_ProjectTodoTable.tsx */

examples/todo/src/4_ProjectTodoTable.tsx

@@ -0,0 +1,177 @@
+import { useCallback } from "react";
+
+import { TodoProject, Task } from "./1_schema";
+
+import {
+    Checkbox,
+    SubmittableInput,
+    Skeleton,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "./basicComponents";
+
+import { InviteButton } from "./components/InviteButton";
+import uniqolor from "uniqolor";
+import { useParams } from "react-router";
+import { ID } from "jazz-tools";
+import { useCoState } from "./2_main";
+
+/** Walkthrough: Reactively rendering a todo project as a table,
+ *               adding and editing tasks
+ *
+ *  Here in `<TodoTable/>`, we use `useAutoSub()` for the first time,
+ *  in this case to load the CoValue for our `TodoProject` as well as
+ *  the `ListOfTasks` referenced in it.
+ */
+
+export function ProjectTodoTable() {
+    const projectId = useParams<{ projectId: 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 = 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
+    // adding that as an item to the project's list of tasks.
+    const createTask = useCallback(
+        (text: string) => {
+            if (!project?.tasks || !text) return;
+            const task = Task.create(
+                {
+                    done: false,
+                    text,
+                },
+                { owner: project._owner },
+            );
+
+            // push will cause useCoState to rerender this component, both here and on other devices
+            project.tasks.push(task);
+        },
+        [project?.tasks, project?._owner],
+    );
+
+    return (
+        <div className="max-w-full w-4xl">
+            <div className="flex justify-between items-center gap-4 mb-4">
+                <h1>
+                    {
+                        // This is how we can access properties from the project query,
+                        // accounting for the fact that note everything might be loaded yet
+                        project?.title ? (
+                            <>
+                                {project.title}{" "}
+                                <span className="text-sm">({project.id})</span>
+                            </>
+                        ) : (
+                            <Skeleton className="mt-1 w-[200px] h-[1em] rounded-full" />
+                        )
+                    }
+                </h1>
+                <InviteButton value={project} valueHint="project" />
+            </div>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead className="w-[40px]">Done</TableHead>
+                        <TableHead>Task</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {project?.tasks?.map(
+                        (task) => task && <TaskRow key={task.id} task={task} />,
+                    )}
+                    <NewTaskInputRow
+                        createTask={createTask}
+                        disabled={!project}
+                    />
+                </TableBody>
+            </Table>
+        </div>
+    );
+}
+
+export function TaskRow({ task }: { task: Task | undefined }) {
+    return (
+        <TableRow>
+            <TableCell>
+                <Checkbox
+                    className="mt-1"
+                    checked={task?.done}
+                    onCheckedChange={(checked) => {
+                        // Tick or untick the task
+                        // Task is also immutable, but this will update all queries
+                        // that include this task as a reference
+                        if (task) task.done = !!checked;
+                    }}
+                />
+            </TableCell>
+            <TableCell>
+                <div className="flex flex-row justify-between items-center gap-2">
+                    {task?.text ? (
+                        <span className={task?.done ? "line-through" : ""}>
+                            {task.text}
+                        </span>
+                    ) : (
+                        <Skeleton className="mt-1 w-[200px] h-[1em] rounded-full" />
+                    )}
+                    {
+                        // Here we see for the first time how we can access edit history
+                        // for a CoValue, and use it to display who created the task.
+                        task?._edits.text?.by?.profile?.name ? (
+                            <span
+                                className="rounded-full py-0.5 px-2 text-xs"
+                                style={uniqueColoring(task._edits.text.by.id)}
+                            >
+                                {task._edits.text.by.profile.name}
+                            </span>
+                        ) : (
+                            <Skeleton className="mt-1 w-[50px] h-[1em] rounded-full" />
+                        )
+                    }
+                </div>
+            </TableCell>
+        </TableRow>
+    );
+}
+
+/** Walkthrough: This is the end of the walkthrough so far! */
+
+function NewTaskInputRow({
+    createTask,
+    disabled,
+}: {
+    createTask: (text: string) => void;
+    disabled: boolean;
+}) {
+    return (
+        <TableRow>
+            <TableCell>
+                <Checkbox className="mt-1" disabled />
+            </TableCell>
+            <TableCell>
+                <SubmittableInput
+                    onSubmit={(taskText) => createTask(taskText)}
+                    label="Add"
+                    placeholder="New task"
+                    disabled={disabled}
+                />
+            </TableCell>
+        </TableRow>
+    );
+}
+
+function uniqueColoring(seed: string) {
+    const darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    return {
+        color: uniqolor(seed, { lightness: darkMode ? 80 : 20 }).color,
+        background: uniqolor(seed, { lightness: darkMode ? 20 : 80 }).color,
+    };
+}

examples/todo/src/App.tsx

@@ -1,259 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-import { CoMap, CoID, AccountID } from "cojson";
-import {
-    consumeInviteLinkFromWindowLocation,
-    useJazz,
-    useProfile,
-    useTelepathicState,
-    createInviteLink,
-} from "jazz-react";
-
-import { SubmittableInput } from "./components/SubmittableInput";
-import { useToast } from "./components/ui/use-toast";
-import { Skeleton } from "./components/ui/skeleton";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/ui/table";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Button } from "@/components/ui/button";
-import uniqolor from "uniqolor";
-import QRCode from "qrcode";
-import { CoList } from "cojson/dist/contentTypes/coList";
-
-type Task = CoMap<{ done: boolean; text: string }>;
-
-type ListOfTasks = CoList<CoID<Task>>;
-
-type TodoList = CoMap<{
-    title: string;
-    tasks: CoID<ListOfTasks>;
-}>;
-
-export default function App() {
-    const [listId, setListId] = useState<CoID<TodoList>>();
-
-    const { localNode, logOut } = useJazz();
-
-    useEffect(() => {
-        const listener = async () => {
-            const acceptedInvitation =
-                await consumeInviteLinkFromWindowLocation<TodoList>(localNode);
-
-            if (acceptedInvitation) {
-                setListId(acceptedInvitation.valueID);
-                window.location.hash = acceptedInvitation.valueID;
-                return;
-            }
-
-            setListId(window.location.hash.slice(1) as CoID<TodoList>);
-        };
-        window.addEventListener("hashchange", listener);
-        listener();
-
-        return () => {
-            window.removeEventListener("hashchange", listener);
-        };
-    }, [localNode]);
-
-    const createList = useCallback(
-        (title: string) => {
-            if (!title) return;
-            const listGroup = localNode.createGroup();
-            const list = listGroup.createMap<TodoList>();
-            const tasks = listGroup.createList<ListOfTasks>();
-
-            list.edit((list) => {
-                list.set("title", title);
-                list.set("tasks", tasks.id);
-            });
-
-            window.location.hash = list.id;
-        },
-        [localNode]
-    );
-
-    return (
-        <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-            {listId ? (
-                <TodoListComponent listId={listId} />
-            ) : (
-                <SubmittableInput
-                    onSubmit={createList}
-                    label="Create New List"
-                    placeholder="New list title"
-                />
-            )}
-            <Button
-                onClick={() => {
-                    window.location.hash = "";
-                    logOut();
-                }}
-                variant="outline"
-            >
-                Log Out
-            </Button>
-        </div>
-    );
-}
-
-export function TodoListComponent({ listId }: { listId: CoID<TodoList> }) {
-    const list = useTelepathicState(listId);
-    const tasks = useTelepathicState(list?.get("tasks"));
-
-    const createTask = (text: string) => {
-        if (!tasks || !text) return;
-        const task = tasks.group.createMap<Task>();
-
-        task.edit((task) => {
-            task.set("text", text);
-            task.set("done", false);
-        });
-
-        tasks.edit((tasks) => {
-            tasks.push(task.id);
-        });
-    };
-
-    return (
-        <div className="max-w-full w-4xl">
-            <div className="flex justify-between items-center gap-4 mb-4">
-                <h1>
-                    {list?.get("title") ? (
-                        <>
-                            {list.get("title")}{" "}
-                            <span className="text-sm">({list.id})</span>
-                        </>
-                    ) : (
-                        <Skeleton className="mt-1 w-[200px] h-[1em] rounded-full" />
-                    )}
-                </h1>
-                {list && <InviteButton list={list} />}
-            </div>
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead className="w-[40px]">Done</TableHead>
-                        <TableHead>Task</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {tasks?.map((taskId) => (
-                        <TaskRow key={taskId} taskId={taskId} />
-                    ))}
-                    <TableRow key="new">
-                        <TableCell>
-                            <Checkbox className="mt-1" disabled />
-                        </TableCell>
-                        <TableCell>
-                            <SubmittableInput
-                                onSubmit={(taskText) => createTask(taskText)}
-                                label="Add"
-                                placeholder="New task"
-                                disabled={!list}
-                            />
-                        </TableCell>
-                    </TableRow>
-                </TableBody>
-            </Table>
-        </div>
-    );
-}
-
-function TaskRow({ taskId }: { taskId: CoID<Task> }) {
-    const task = useTelepathicState(taskId);
-
-    return (
-        <TableRow>
-            <TableCell>
-                <Checkbox
-                    className="mt-1"
-                    checked={task?.get("done")}
-                    onCheckedChange={(checked) => {
-                        task?.edit((task) => {
-                            task.set("done", !!checked);
-                        });
-                    }}
-                />
-            </TableCell>
-            <TableCell>
-                <div className="flex flex-row justify-between items-center gap-2">
-                    <span className={task?.get("done") ? "line-through" : ""}>
-                        {task?.get("text") || (
-                            <Skeleton className="mt-1 w-[200px] h-[1em] rounded-full" />
-                        )}
-                    </span>
-                    <NameBadge accountID={task?.whoEdited("text")} />
-                </div>
-            </TableCell>
-        </TableRow>
-    );
-}
-
-function NameBadge({ accountID }: { accountID?: AccountID }) {
-    const profile = useProfile(accountID);
-
-    const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light";
-
-    const brightColor = uniqolor(accountID || "", { lightness: 80 }).color;
-    const darkColor = uniqolor(accountID || "", { lightness: 20 }).color;
-
-    return profile?.get("name") ? (
-        <span
-            className="rounded-full py-0.5 px-2 text-xs"
-            style={{
-                color: theme == "light" ? darkColor : brightColor,
-                background: theme == "light" ? brightColor : darkColor,
-            }}
-        >
-            {profile.get("name")}
-        </span>
-    ) : (
-        <Skeleton className="mt-1 w-[50px] h-[1em] rounded-full" />
-    );
-}
-
-function InviteButton({ list }: { list: TodoList }) {
-    const [existingInviteLink, setExistingInviteLink] = useState<string>();
-    const { toast } = useToast();
-
-    return (
-        list.group.myRole() === "admin" && (
-            <Button
-                size="sm"
-                className="py-0"
-                disabled={!list}
-                variant="outline"
-                onClick={async () => {
-                    let inviteLink = existingInviteLink;
-                    if (list && !inviteLink) {
-                        inviteLink = createInviteLink(list, "writer");
-                        setExistingInviteLink(inviteLink);
-                    }
-                    if (inviteLink) {
-                        const qr = await QRCode.toDataURL(inviteLink, {
-                            errorCorrectionLevel: "L",
-                        });
-                        navigator.clipboard.writeText(inviteLink).then(() =>
-                            toast({
-                                title: "Copied invite link to clipboard!",
-                                description: (
-                                    <img src={qr} className="w-20 h-20" />
-                                ),
-                            })
-                        );
-                    }
-                }}
-            >
-                Invite
-            </Button>
-        )
-    );
-}

examples/todo/src/basicComponents/SubmittableInput.tsx

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

examples/todo/src/basicComponents/TitleAndLogo.tsx

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

examples/todo/src/basicComponents/index.ts

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

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

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

examples/todo/src/basicComponents/themeProvider.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

examples/todo/src/components/Auth.tsx

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

examples/todo/src/components/InviteButton.tsx

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

examples/todo/src/index.css

@@ -1,12 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root, body, #root {
-  width: 100%;
-  height: 100%;
-}
-
+ 
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -14,63 +9,63 @@
 
     --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;

examples/todo/src/main.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-
-import { WithJazz } from "jazz-react";
-import { LocalAuth } from "jazz-react-auth-local";
-
-import { PrettyAuthComponent } from "./components/prettyAuth.tsx";
-import { ThemeProvider } from "./components/themeProvider.tsx";
-import { Toaster } from "./components/ui/toaster.tsx";
-import App from "./App.tsx";
-import "./index.css";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-    <React.StrictMode>
-        <ThemeProvider>
-            <div className="flex items-center gap-2 justify-center mt-5">
-                <img src="jazz-logo.png" className="h-5" /> Jazz Todo List
-                Example
-            </div>
-            <WithJazz
-                auth={LocalAuth({
-                    appName: "Jazz Todo List Example",
-                    Component: PrettyAuthComponent,
-                })}
-                syncAddress={
-                    new URLSearchParams(window.location.search).get("sync") ||
-                    undefined
-                }
-            >
-                <App />
-                <Toaster />
-            </WithJazz>
-        </ThemeProvider>
-    </React.StrictMode>
-);

examples/todo/vite.config.ts

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

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/.dockerignore

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

homepage/homepage/.eslintrc.json

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

homepage/homepage/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+typedoc
+codeSamples

homepage/homepage/.prettierrc.js

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

homepage/homepage/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

homepage/homepage/app/docs/guide.mdx

@@ -0,0 +1,375 @@
+import { Slogan } from "@/components/forMdx";
+import { JazzLogo } from "@/components/logos";
+
+<h1 id="guide">Learn some Jazz.</h1>
+<Slogan>Build an issue tracking app with distributed state.</Slogan>
+
+Our issues app will be quite simple, but it will have team collaboration. <span className="text-nowrap">**Let's call it... &ldquo;Circular.&rdquo;**</span>
+
+We'll build everything **step-by-step,** in typical, immediately usable stages. We'll explore many important things Jazz does &mdash; so **follow along** or **just pick things out.**
+
+<h2 id="setup">Project Setup</h2>
+
+1. Create a project from a generic Vite starter template:
+
+    ```bash
+    npx degit gardencmp/vite-ts-react-tailwind circular
+    cd circular
+    npm install
+    npm run dev
+    ```
+
+    You should now have an empty app running, typically at [localhost:5173](http://localhost:5173).<br/>
+
+    <small>
+        (If you make changes to the code, the app will automatically refresh.)
+    </small>
+
+2. Install `jazz-tools` and `jazz-react`<br/>
+
+    <small>(in a new terminal window):</small>
+
+    ```bash
+    cd circular
+    npm install jazz-tools jazz-react
+    ```
+
+3. Set up a Jazz context, by modifying `src/main.tsx`:
+
+    ```tsx subtle=1,2,3,4,13,15,16,17,19
+    import React from "react";
+    import ReactDOM from "react-dom/client";
+    import App from "./App.tsx";
+    import "./index.css";
+    import { JazzReact } from "jazz-react";
+
+    const Jazz = createJazzReactContext({
+        auth: DemoAuth({ appName: "Circular" }),
+        peer: "wss://mesh.jazz.tools/?key=you@example.com", // <- put your email here to receive a proper API key for later
+    });
+    export const { useAccount, useCoState } = Jazz;
+
+    ReactDOM.createRoot(document.getElementById("root")!).render(
+        <Jazz.Provider>
+            <React.StrictMode>
+                <App />
+            </React.StrictMode>
+        </Jazz.Provider>,
+    );
+    ```
+
+    This sets Jazz up, extracts app-specific hooks for later, and wraps our app in the provider.
+
+TODO: explain Auth
+
+<h2 id="intro-to-covalues">Intro to CoValues</h2>
+
+Let's learn about the **central idea** behind Jazz: **Collaborative Values.**
+
+What if we could **treat distributed state like local state?** That's what CoValues do.
+
+We can
+
+-   **create** CoValues, anywhere
+-   **load** CoValues by `ID`, from anywhere else
+-   **edit** CoValues, from anywhere, by mutating them like local state
+-   **subscribe to edits** in CoValues, whether they're local or remote
+
+<h3 id="first-schema">Declaring our own CoValues</h3>
+
+To make our own CoValues, we first need to declare a schema for them. Think of a schema as a combination of TypeScript types and runtime type information.
+
+Let's start by defining a schema for our most central entity in Circular: an **Issue.**
+
+Create a new file `src/schema.ts` and add the following:
+
+```ts
+import { CoMap, co } from "jazz-tools";
+
+export class Issue extends CoMap {
+    title = co.string;
+    description = co.string;
+    estimate = co.number;
+    status? = co.literal("backlog", "in progress", "done");
+}
+```
+
+TODO: explain what's happening
+
+<h3>Reading from CoValues</h3>
+
+CoValues are designed to be read like simple local JSON state. Let's see how we can read from an Issue by building a component to render one.
+
+Create a new file `src/components/Issue.tsx` and add the following:
+
+```tsx
+import { Issue } from "../schema";
+
+export function IssueComponent({ issue }, { issue: Issue }) {
+    return (
+        <div className="grid grid-cols-6 text-sm border-r border-b [&>*]:p-2 [&>*]:border-l [&>*]:border-t">
+            <h2>{issue.title}</h2>
+            <p className="col-span-3">{issue.description}</p>
+            <p>Estimate: {issue.estimate}</p>
+            <p>Status: {issue.status}</p>
+        </div>
+    );
+}
+```
+
+Simple enough!
+
+<h3>Creating CoValues</h3>
+
+To actually see an Issue, we have to create one. This is where things start to get interesting...
+
+Let's modify `src/App.tsx` to prepare for creating an Issue and then rendering it:
+
+```tsx subtle=5,13,14,15
+import { useState, useCallback } from "react";
+import { Issue } from "./schema";
+import { IssueComponent } from "./components/Issue";
+
+function App() {
+    const [issue, setIssue] = useState<Issue>();
+
+    if (issue) {
+        return <IssueComponent issue={issue} />;
+    } else {
+        return <button>Create Issue</button>;
+    }
+}
+
+export default App;
+```
+
+Now, finally, let's implement creating an issue:
+
+```tsx subtle=1,2,3,5,6,8,23,24,25,27,28,29,30
+import { useState } from "react";
+import { Issue } from "./schema";
+import { IssueComponent } from "./components/Issue";
+import { useAccount } from "./main";
+
+function App() {
+    const { me } = useAccount();
+    const [issue, setIssue] = useState<Issue>();
+
+    const createIssue = () => {
+        const newIssue = Issue.create(
+            {
+                title: "Buy terrarium",
+                description: "Make sure it's big enough for 10 snails.",
+                estimate: 5,
+                status: "backlog",
+            },
+            { owner: me },
+        );
+        setIssue(newIssue);
+    };
+
+    if (issue) {
+        return <IssueComponent issue={issue} />;
+    } else {
+        return <button onClick={createIssue}>Create Issue</button>;
+    }
+}
+
+export default App;
+```
+
+Now you should be able to create a new issue by clicking the button and then see it rendered.
+
+<div className="text-xs uppercase text-stone-400 dark:text-stone-600 tracking-wider">
+    Preview
+</div>
+<div className="p-3 md:-mx-3 rounded border border-stone-100 dark:border-stone-900 bg-white dark:bg-black not-prose">
+    <div className="grid grid-cols-6 text-sm border-r border-b [&>*]:p-2 [&>*]:border-l [&>*]:border-t">
+        <h2>Buy terrarium</h2>
+        <p className="col-span-3">Make sure it's big enough for 10 snails.</p>
+        <p>Estimate: 5</p>
+        <p>Status: backlog</p>
+    </div>
+</div>
+
+We'll already notice one interesting thing here:
+
+-   We have to create every CoValue with an `owner`!
+    -   this will determine access rights on the CoValue, which we'll learn about in "Groups & Permissions"
+    -   here we set `owner` to the current user `me`, which we get from the Jazz context / `useAccount`
+
+**Behind the scenes, Jazz not only creates the Issue in memory but also automatically syncs an encrypted version to the cloud and persists it locally. The Issue also has a globally unique ID.**
+
+We'll make use of both of these facts in a bit, but for now let's start with local editing and subscribing.
+
+<h3>Editing CoValues and subscribing to edits</h3>
+
+Since we're the owner of the CoValue, we should be able to edit it, right?
+
+And since this is a React app, it would be nice to subscribe to edits of the CoValue and reactively re-render the UI, like we can with local state.
+
+This is exactly what the `useCoState` hook is for!
+
+-   Note that `useCoState` doesn't take a CoValue directly, but rather a CoValue's schema, plus its `ID`.
+    -   So we'll slightly adapt our `useState` to only keep track of an issue ID...
+    -   ...and then use `useCoState` to get the actual issue
+
+Let's modify `src/App.tsx`:
+
+```tsx subtle=1,2,3,4,5,6,7,12,13,14,15,16,17,18,19,20,21,23,25,26,27,28,29,30,32
+import { useState } from "react";
+import { Issue } from "./schema";
+import { IssueComponent } from "./components/Issue";
+import { useAccount } from "./main";
+
+function App() {
+    const { me } = useAccount();
+    const [issueID, setIssueID] = useState<ID<Issue>>();
+
+    const issue = useCoState(Issue, issueID);
+
+    const createIssue = () => {
+        const newIssue = Issue.create(
+            {
+                title: "Buy terrarium",
+                description: "Make sure it's big enough for 10 snails.",
+                estimate: 5,
+                status: "backlog",
+            },
+            { owner: me },
+        );
+        setIssueID(newIssue.id);
+    };
+
+    if (issue) {
+        return <IssueComponent issue={issue} />;
+    } else {
+        return <button onClick={createIssue}>Create Issue</button>;
+    }
+}
+
+export default App;
+```
+
+And now for the exciting part! Let's make `src/components/Issue.tsx` an editing component.
+
+```tsx subtle=1,3,4,5,28,29,30,31
+import { Issue } from "../schema";
+
+export function IssueComponent({ issue }, { issue: Issue }) {
+    return (
+        <div className="grid grid-cols-6 text-sm border-r border-b [&>*]:p-2 [&>*]:border-l [&>*]:border-t">
+            <input type="text"
+                value={issue.title}
+                onChange={(event) => { issue.title = event.target.value }}/>
+            <textarea className="col-span-3"
+                value={issue.description}
+                onChange={(event) => { issue.description = event.target.value }}/>
+            <label className="flex">
+                Estimate:
+                <input type="number" className="text-right min-w-0"
+                    value={issue.estimate}
+                    onChange={(event) => { issue.estimate = Number(event.target.value) }}/>
+            </label>
+            <select
+                value={issue.status}
+                onChange={(event) => {
+                    issue.status = event.target.value as "backlog" | "in progress" | "done"
+                }}
+            >
+                <option value="backlog">Backlog</option>
+                <option value="in progress">In Progress</option>
+                <option value="done">Done</options>
+            </select>
+        </div>
+    );
+}
+```
+
+<div className="text-xs uppercase text-stone-400 dark:text-stone-600 tracking-wider">
+    Preview
+</div>
+<div className="p-3 md:-mx-3 rounded border border-stone-100 dark:border-stone-900 bg-white dark:bg-black not-prose">
+    <div className="grid grid-cols-6 text-sm border-r border-b [&>*]:p-2 [&>*]:border-l [&>*]:border-t">
+        <input type="text" value={"Buy terrarium"} />
+        <input
+            type="text"
+            className="col-span-3"
+            value={"Make sure it's big enough for 10 snails."}
+        />
+        <label className="flex">
+            Estimate:{" "}
+            <input type="number" value={5} className="text-right min-w-0" />
+        </label>
+        <select value={"backlog"}>
+            <option value="backlog">Backlog</option>
+            <option value="in progress">In Progress</option>
+            <option value="done">Done</option>
+        </select>
+    </div>
+</div>
+
+You'll immediately notice that we're doing something non-idiomatic for React: we mutate the issue directly, by assigning to its properties.
+
+This works because CoValues intercept these edits, update their local view accordingly (React doesn't really care after rendering) and then notify subscribers of the change, who will receive a fresh, updated view of the CoValue.
+
+<aside className="text-sm border rounded px-4 my-4 max-w-3xl [&_pre]:mx-0">
+    <h4 className="not-prose text-base py-2 mb-3 -mx-4 px-4 border-b">💡 A Quick Overview of Subscribing to CoValues</h4>
+
+    There are three main ways to subscribe to a CoValue:
+
+    1.  Directly on an instance:
+
+        ```ts
+        const unsub = issue.subscribe((updatedIssue) => console.log(updatedIssue));
+        ```
+
+    2.  If you only have an ID (this will load the issue if needed):
+
+        ```ts
+        const unsub = Issue.subscribe(issueID, { as: me }, (updatedIssue) => {
+            console.log(updatedIssue);
+        });
+        ```
+
+    3.  If you're in a React component, to re-render reactively:
+        `tsx
+        const issue = useCoState(Issue, issueID);
+        `
+
+            By the way, `useCoState` is basically just an optimized version of
+
+            ```ts
+            function useCoState<V extends CoValue>(Schema: CoValueClass<V>, id?: ID<V>): V | undefined {
+                const { me } = useAccount();
+                const [value, setValue] = useState<V>();
+
+                useEffect(() => Schema.subscribe(id, { as: me }, setValue), [id]);
+
+                return value;
+            }
+            ```
+
+</aside>
+
+We have one subscriber on our Issue, with `useCoState` in `src/App.tsx`, which will cause the `App` component and its children to re-render whenever the Issue changes.
+
+<h3>Automatic local & cloud persistence</h3>
+
+So far our Issue CoValues just looked like ephemeral local state. We'll now start exploring the first main feature that makes CoValues special: **automatic persistence.**
+
+<span className="text-amber-500">
+    🚧 OH NO - This is as far as we've written the Guide. 🚧
+</span>
+{" -> "}
+<a href="https://github.com/gardencmp/jazz/issues/186">Complain on GitHub</a>
+
+<h3>Remote sync</h3>
+
+<h2 id="refs-and-on-demand-subscribe">Refs & Auto-Subscribe</h2>
+
+<h2 id="groups-and-permissions">Groups & Permissions</h2>
+
+<h2 id="accounts-and-migrations">Accounts & Migrations</h2>
+
+<h2 id="backend-workers">Backend Workers</h2>

homepage/homepage/app/docs/page.tsx

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

homepage/homepage/app/globals.css

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