feat: integrate the Inbox improvements

.changeset/pretty-chefs-yawn.md

@@ -0,0 +1,6 @@
+---
+"jazz-browser": patch
+"cojson": patch
+---
+
+Add a new writeOnly role, to limit access only to their own changes. Useful to push objects into lists of moderated content.

.github/workflows/build-starters.yaml

@@ -1,52 +0,0 @@
-name: Build Starters
-
-on:
-  push:
-    branches: [ "main" ]
-
-jobs:
-  build-starters:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        starter: [
-          "react-demo-auth-tailwind",
-        ]
-
-    steps:
-    - uses: actions/checkout@v3
-      with:
-        submodules: true
-
-    - name: Enable corepack
-      run: corepack enable
-
-    - name: Install Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version-file: '.node-version'
-        cache: 'pnpm'
-
-    - name: Get pnpm store directory
-      shell: bash
-      run: |
-        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-    - uses: actions/cache@v3
-      name: Setup pnpm cache
-      with:
-        path: ${{ env.STORE_PATH }}
-        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-pnpm-store-
-
-
-    - name: Install dependencies
-      run: pnpm install --frozen-lockfile
-
-
-    - name: Pnpm Build
-      run: |
-        pnpm install
-        pnpm turbo build;
-      working-directory: ./starters/${{ matrix.starter }}

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding", "starters/react-demo-auth-tailwind"]
+        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/music-player", "examples/pets", "examples/onboarding"]
 
     steps:
       - uses: actions/checkout@v3
@@ -45,6 +45,10 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Setup .env
+        run: echo "VITE_WS_PEER=ws://localhost:4200/" >> .env
+        working-directory: ./${{ matrix.project }}
+
       - name: Pnpm Build
         run: pnpm turbo build
         working-directory: ./${{ matrix.project }}

.github/workflows/release.yml

@@ -4,13 +4,6 @@ on:
   push:
     branches:
       - main
-  workflow_dispatch:
-    inputs:
-      debug_enabled:
-        type: boolean
-        description: "Run tmate session for debugging"
-        required: false
-        default: false
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -55,11 +48,4 @@ jobs:
           publish: pnpm release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      # Enable tmate debugging only if the workflow is manually triggered, debug_enabled is true, and the workflow failed
-      - name: Setup tmate session for debugging
-        if: ${{ failure() && github.event_name == 'workflow_dispatch' && inputs.debug_enabled }}
-        uses: mxschmitt/action-tmate@v3
-        with:
-          timeout-minutes: 15
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

examples/book-shelf/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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

examples/book-shelf/CHANGELOG.md

@@ -0,0 +1,263 @@
+# jazz-example-book-shelf
+
+## 0.1.31
+
+### Patch Changes
+
+- Updated dependencies [249eecb]
+  - jazz-tools@0.8.39
+  - jazz-browser-media-images@0.8.39
+  - jazz-react@0.8.39
+
+## 0.1.30
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+- jazz-browser-media-images@0.8.38
+
+## 0.1.29
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+- jazz-browser-media-images@0.8.37
+
+## 0.1.28
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+  - jazz-browser-media-images@0.8.36
+
+## 0.1.27
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+  - jazz-browser-media-images@0.8.35
+
+## 0.1.26
+
+### Patch Changes
+
+- jazz-react@0.8.34
+- jazz-tools@0.8.34
+- jazz-browser-media-images@0.8.34
+
+## 0.1.25
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.33
+- jazz-react@0.8.33
+
+## 0.1.24
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+  - jazz-browser-media-images@0.8.32
+
+## 0.1.23
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+- jazz-browser-media-images@0.8.31
+
+## 0.1.22
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+- jazz-browser-media-images@0.8.30
+
+## 0.1.21
+
+### Patch Changes
+
+- jazz-react@0.8.29
+- jazz-tools@0.8.29
+- jazz-browser-media-images@0.8.29
+
+## 0.1.20
+
+### Patch Changes
+
+- jazz-react@0.8.28
+- jazz-tools@0.8.28
+- jazz-browser-media-images@0.8.28
+
+## 0.1.19
+
+### Patch Changes
+
+- jazz-react@0.8.27
+- jazz-tools@0.8.27
+- jazz-browser-media-images@0.8.27
+
+## 0.1.18
+
+### Patch Changes
+
+- Updated dependencies [59d37df]
+  - jazz-react@0.8.26
+
+## 0.1.17
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.24
+- jazz-react@0.8.24
+
+## 0.1.16
+
+### Patch Changes
+
+- Updated dependencies [d348c2d]
+- Updated dependencies [6902b5b]
+- Updated dependencies [1a0cd3d]
+  - jazz-tools@0.8.23
+  - jazz-react@0.8.23
+  - jazz-browser-media-images@0.8.23
+
+## 0.1.15
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+  - jazz-browser-media-images@0.8.22
+
+## 0.1.14
+
+### Patch Changes
+
+- Updated dependencies [149ca97]
+  - jazz-tools@0.8.21
+  - jazz-react@0.8.21
+  - jazz-browser-media-images@0.8.21
+
+## 0.1.13
+
+### Patch Changes
+
+- Updated dependencies [dd9b13f]
+- Updated dependencies [a69ed0b]
+- Updated dependencies [3ef3ff3]
+- Updated dependencies [c6931b8]
+  - jazz-react@0.8.20
+  - jazz-browser-media-images@0.8.20
+
+## 0.1.12
+
+### Patch Changes
+
+- jazz-react@0.8.19
+- jazz-tools@0.8.19
+- jazz-browser-media-images@0.8.19
+
+## 0.1.11
+
+### Patch Changes
+
+- jazz-react@0.8.18
+- jazz-tools@0.8.18
+- jazz-browser-media-images@0.8.18
+
+## 0.1.10
+
+### Patch Changes
+
+- jazz-react@0.8.17
+- jazz-tools@0.8.17
+- jazz-browser-media-images@0.8.17
+
+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [2af107c]
+  - jazz-react@0.8.16
+  - jazz-browser-media-images@0.8.16
+  - jazz-tools@0.8.16
+
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies [cce679b]
+  - jazz-tools@0.8.15
+  - jazz-browser-media-images@0.8.15
+  - jazz-react@0.8.15
+
+## 0.1.7
+
+### Patch Changes
+
+- Updated dependencies [36273b3]
+  - jazz-tools@0.8.14
+  - jazz-browser-media-images@0.8.14
+  - jazz-react@0.8.14
+
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [fd011d7]
+  - jazz-tools@0.8.13
+  - jazz-browser-media-images@0.8.13
+  - jazz-react@0.8.13
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [3cc6aee]
+  - jazz-react@0.8.12
+  - jazz-tools@0.8.12
+  - jazz-browser-media-images@0.8.12
+
+## 0.1.4
+
+### Patch Changes
+
+- jazz-react@0.8.11
+- jazz-tools@0.8.11
+- jazz-browser-media-images@0.8.11
+
+## 0.1.3
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.7
+- jazz-react@0.8.7
+
+## 0.1.2
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.6
+- jazz-react@0.8.6
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [c3f4e6b]
+- Updated dependencies [d9152ed]
+  - jazz-tools@0.8.5
+  - jazz-browser-media-images@0.8.5
+  - jazz-react@0.8.5

examples/book-shelf/Dockerfile

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

examples/book-shelf/README.md

@@ -0,0 +1,41 @@
+# Book shelf example with Jazz and Next.js
+
+This is an example of a book shelf where you can add and review books.
+It shows you how to create and edit data, upload images, and share data publicly.
+
+Live version: https://books-demo.jazz.tools
+
+## Installing & running the example locally
+
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+```bash
+npx degit gardencmp/jazz jazz
+```
+
+Go to the book-shelf example directory:
+```bash
+cd jazz/examples/book-shelf
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
+```
+
+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 Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/components/JazzAndAuth.tsx](./src/components/JazzAndAuth.tsx).

examples/book-shelf/job-template.nomad

@@ -0,0 +1,56 @@
+job "example-bookShelf$BRANCH_SUFFIX" {
+  region     = "global"
+  datacenters = ["*"]
+
+  group "static" {
+    count = 4
+
+    network {
+      port "http" {
+        to = 80
+      }
+    }
+
+    constraint {
+      attribute = "${node.class}"
+      operator  = "="
+      value     = "cloud"
+    }
+
+    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-bookShelf$BRANCH_SUFFIX"
+        port = "http"
+        provider = "consul"
+      }
+
+      resources {
+        cpu    = 50 # MHz
+        memory = 50 # MB
+      }
+    }
+  }
+}
+# deploy bump 4

examples/book-shelf/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/book-shelf/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

examples/book-shelf/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "jazz-example-book-shelf",
+  "version": "0.1.31",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "clsx": "^2.0.0",
+    "jazz-browser-media-images": "workspace:0.8.39",
+    "jazz-react": "workspace:0.8.39",
+    "jazz-tools": "workspace:0.8.39",
+    "next": "14.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.2.19",
+    "@types/react-dom": "^18.2.7",
+    "postcss": "^8.4.27",
+    "tailwindcss": "3.3.2",
+    "typescript": "^5.3.3"
+  }
+}

examples/book-shelf/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

examples/book-shelf/src/app/add/page.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { Container } from "@/components/Container";
+import { useAccount } from "@/components/JazzAndAuth";
+import RatingInput from "@/components/RatingInput";
+import { BookReview, ListOfBookReviews } from "@/schema";
+import { createImage } from "jazz-browser-media-images";
+import { Group, ImageDefinition } from "jazz-tools";
+import { useRouter } from "next/navigation";
+import { ChangeEvent, useState } from "react";
+
+export default function AddBookReview() {
+  const { me } = useAccount();
+
+  const [title, setTitle] = useState("");
+  const [author, setAuthor] = useState("");
+  const [review, setReview] = useState("");
+  const [rating, setRating] = useState(0);
+  const [dateRead, setDateRead] = useState(
+    new Date().toISOString().split("T")[0],
+  );
+  const [coverImage, setCoverImage] = useState<ImageDefinition | undefined>();
+
+  const router = useRouter();
+
+  const onDateChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const date = new Date(event.currentTarget.value)
+      .toISOString()
+      .split("T")[0];
+    setDateRead(date);
+  };
+
+  const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.currentTarget.files?.[0];
+    const group = Group.create({ owner: me });
+    group.addMember("everyone", "reader");
+
+    if (file) {
+      createImage(file, { owner: group }).then((image) => {
+        setCoverImage(image);
+      });
+    }
+  };
+
+  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!me?.profile) return;
+
+    const bookReview = BookReview.create(
+      {
+        title,
+        author,
+        review,
+        rating,
+        dateRead: new Date(dateRead),
+        cover: coverImage,
+      },
+      {
+        owner: me.profile._owner,
+      },
+    );
+
+    if (!me.profile.bookReviews) {
+      me.profile.bookReviews = ListOfBookReviews.create([], {
+        owner: me.profile._owner,
+      });
+    }
+
+    me.profile.bookReviews.push(bookReview);
+    router.push("/");
+  };
+
+  return (
+    <Container className="grid max-w-lg gap-8 py-8">
+      <h1 className="text-lg font-semibold text-black">Add book review</h1>
+      <form action="" className="grid gap-4" onSubmit={onSubmit}>
+        <label className="grid gap-1 text-sm text-gray-600">
+          Cover
+          <input type="file" onChange={onImageChange} />
+        </label>
+
+        <label className="grid gap-1 text-sm text-gray-600">
+          Title
+          <input
+            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
+            type="text"
+            value={title}
+            required
+            onChange={(e) => setTitle(e.target.value)}
+          ></input>
+        </label>
+
+        <label className="grid gap-1 text-sm text-gray-600">
+          Author
+          <input
+            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
+            type="text"
+            value={author}
+            required
+            onChange={(e) => setAuthor(e.target.value)}
+          ></input>
+        </label>
+
+        <label className="grid gap-1 text-sm text-gray-600">
+          Date read
+          <input
+            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
+            type="date"
+            value={dateRead}
+            required
+            onChange={onDateChange}
+          />
+        </label>
+
+        <div className="grid gap-1 text-sm text-gray-600">
+          Rating
+          <RatingInput
+            value={rating}
+            onChange={(rating) => setRating(rating)}
+          />
+        </div>
+
+        <label className="grid gap-1 text-sm text-gray-600">
+          Review
+          <textarea
+            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
+            value={review}
+            onChange={(e) => setReview(e.target.value)}
+          ></textarea>
+        </label>
+        <Button variant="primary" type="submit">
+          Add
+        </Button>
+      </form>
+    </Container>
+  );
+}

examples/book-shelf/src/app/book/[slug]/page.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { BookCover } from "@/components/BookCover";
+import { Container } from "@/components/Container";
+import { useCoState } from "@/components/JazzAndAuth";
+import Rating from "@/components/Rating";
+import RatingInput from "@/components/RatingInput";
+import { BookReview } from "@/schema";
+import clsx from "clsx";
+import { Group, ID } from "jazz-tools";
+
+const BookReviewTitle = ({
+  bookReview,
+  readOnly,
+}: {
+  bookReview: BookReview;
+  readOnly: boolean;
+}) => {
+  const className = "font-serif text-2xl font-bold lg:text-4xl";
+
+  if (readOnly) {
+    return <h1 className={className}>{bookReview.title}</h1>;
+  }
+
+  return (
+    <input
+      value={bookReview.title}
+      placeholder="Book title"
+      className={clsx(
+        className,
+        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
+      )}
+      onChange={(e) => (bookReview.title = e.target.value)}
+    ></input>
+  );
+};
+
+const BookReviewAuthor = ({
+  bookReview,
+  readOnly,
+}: {
+  bookReview: BookReview;
+  readOnly: boolean;
+}) => {
+  const className = "text-gray-700";
+
+  if (readOnly) {
+    return <p className={className}>by {bookReview.author}</p>;
+  }
+
+  return (
+    <input
+      value={bookReview.author}
+      placeholder="Author"
+      className={clsx(
+        className,
+        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
+      )}
+      onChange={(e) => (bookReview.author = e.target.value)}
+    ></input>
+  );
+};
+
+const BookReviewDateRead = ({
+  bookReview,
+  readOnly,
+}: {
+  bookReview: BookReview;
+  readOnly: boolean;
+}) => {
+  const className = "text-gray-700 max-w-[10rem]";
+
+  if (readOnly) {
+    return (
+      bookReview.dateRead && (
+        <p className={className}>{bookReview.dateRead.toLocaleDateString()}</p>
+      )
+    );
+  }
+
+  return (
+    <input
+      type="date"
+      value={bookReview.dateRead?.toISOString().split("T")[0]}
+      placeholder="Date read"
+      className={clsx(
+        className,
+        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
+      )}
+      onChange={(e) => {
+        const date = new Date(e.target.value);
+        bookReview.dateRead = date;
+      }}
+    ></input>
+  );
+};
+
+const BookReviewReview = ({
+  bookReview,
+  readOnly,
+}: {
+  bookReview: BookReview;
+  readOnly: boolean;
+}) => {
+  const className = "text-sm leading-relaxed text-gray-600";
+
+  if (readOnly) {
+    if (bookReview.review) {
+      return <p className={className}>{bookReview.review}</p>;
+    }
+  }
+
+  return (
+    <textarea
+      value={bookReview.review}
+      placeholder="Write your review here..."
+      className={clsx(
+        className,
+        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
+      )}
+      onChange={(e) => (bookReview.review = e.target.value)}
+    ></textarea>
+  );
+};
+
+const BookReviewRating = ({
+  bookReview,
+  readOnly,
+}: {
+  bookReview: BookReview;
+  readOnly: boolean;
+}) => {
+  const className = "text-2xl sm:mx-0";
+
+  if (readOnly) {
+    return <Rating className={className} rating={bookReview.rating} />;
+  }
+
+  return (
+    <RatingInput
+      className={clsx(className, "p-2")}
+      onChange={(rating) => (bookReview.rating = rating)}
+      value={bookReview.rating}
+    />
+  );
+};
+
+export default function Page({ params }: { params: { slug: string } }) {
+  const bookReview = useCoState(BookReview, params.slug as ID<BookReview>);
+
+  if (!bookReview) return <></>;
+
+  const readOnly = !(bookReview._owner.castAs(Group).myRole() === "admin");
+
+  return (
+    <Container className="grid gap-12 py-8">
+      <div className="flex flex-col gap-6 sm:flex-row md:gap-10">
+        <div className="w-[180px]">
+          <BookCover bookReview={bookReview} readOnly={readOnly} />
+        </div>
+
+        <div className="-mx-2 grid max-w-lg flex-1 gap-3 sm:mx-0">
+          <BookReviewTitle bookReview={bookReview} readOnly={readOnly} />
+          <BookReviewAuthor bookReview={bookReview} readOnly={readOnly} />
+          <BookReviewDateRead bookReview={bookReview} readOnly={readOnly} />
+          <BookReviewRating bookReview={bookReview} readOnly={readOnly} />
+          <BookReviewReview bookReview={bookReview} readOnly={readOnly} />
+        </div>
+      </div>
+    </Container>
+  );
+}

examples/book-shelf/src/app/globals.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :focus {
+    @apply outline-none;
+  }
+
+  :focus-visible {
+    @apply ring-2 ring-purple-600/75 dark:ring-2 dark:ring-white/75;
+  }
+}

examples/book-shelf/src/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { JazzAndAuth } from "@/components/JazzAndAuth";
+import { Nav } from "@/components/Nav";
+import clsx from "clsx";
+import { Fraunces } from "next/font/google";
+
+const fraunces = Fraunces({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-fraunces",
+});
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Jazz Book Shelf",
+  description: "Jazz Book Shelf",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={clsx(inter.className, fraunces.variable)}>
+        <JazzAndAuth>
+          <header>
+            <Nav />
+          </header>
+          <main>{children}</main>
+        </JazzAndAuth>
+      </body>
+    </html>
+  );
+}

examples/book-shelf/src/app/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Container } from "@/components/Container";
+import { useAccount } from "@/components/JazzAndAuth";
+import UserProfile from "@/components/UserProfile";
+import { JazzAccount } from "@/schema";
+import { ID } from "jazz-tools";
+
+export default function Home() {
+  const { me } = useAccount();
+
+  return (
+    <Container className="grid gap-12 py-8">
+      <UserProfile id={me?.id as ID<JazzAccount>} />
+
+      <label className="flex flex-wrap items-center gap-3">
+        Share your profile:
+        <input
+          type="text"
+          className="w-full rounded border p-1"
+          value={`${window.location.origin}/user/${me?.id}`}
+          readOnly
+        />
+      </label>
+    </Container>
+  );
+}

examples/book-shelf/src/app/user/[slug]/page.tsx

@@ -0,0 +1,14 @@
+import { Container } from "@/components/Container";
+import UserProfile from "@/components/UserProfile";
+import { JazzAccount } from "@/schema";
+import { ID } from "jazz-tools";
+
+export default function Page({ params }: { params: { slug: string } }) {
+  const { slug } = params;
+
+  return (
+    <Container className="py-8">
+      <UserProfile id={slug as ID<JazzAccount>} />
+    </Container>
+  );
+}

examples/book-shelf/src/components/BookCover.tsx

@@ -0,0 +1,134 @@
+import { Button } from "@/components/Button";
+import { useAccount } from "@/components/JazzAndAuth";
+import PlusIcon from "@/components/icons/PlusIcon";
+import { BookReview } from "@/schema";
+import clsx from "clsx";
+import { createImage } from "jazz-browser-media-images";
+import { ProgressiveImg } from "jazz-react";
+import { Group, ImageDefinition } from "jazz-tools";
+import { ChangeEvent, useRef, useState } from "react";
+
+const BookCoverContainer = ({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={clsx("h-[240px] lg:h-[260px]", className)}>{children}</div>
+  );
+};
+
+const MockCover = ({ bookReview }: { bookReview: BookReview }) => {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 rounded-l-sm rounded-r-md bg-gray-100 px-3 text-center shadow-lg">
+      <p className="font-medium">{bookReview.title}</p>
+      <p className="text-xs">{bookReview.author}</p>
+    </div>
+  );
+};
+
+export function BookCoverReadOnly({
+  bookReview,
+  className,
+}: {
+  bookReview: BookReview;
+  className?: string;
+}) {
+  if (bookReview.cover) {
+    return (
+      <BookCoverContainer className={className}>
+        <ProgressiveImg image={bookReview.cover}>
+          {({ src }) => (
+            <img
+              className="max-h-full max-w-full rounded-l-sm rounded-r-md shadow-lg"
+              src={src}
+            />
+          )}
+        </ProgressiveImg>
+      </BookCoverContainer>
+    );
+  }
+
+  return (
+    <BookCoverContainer className={className}>
+      <MockCover bookReview={bookReview} />
+    </BookCoverContainer>
+  );
+}
+
+export function BookCoverInput({ bookReview }: { bookReview: BookReview }) {
+  const { me } = useAccount();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (!me?.profile) return;
+
+    const file = event.currentTarget.files?.[0];
+
+    if (file) {
+      createImage(file, { owner: me.profile._owner }).then((image) => {
+        bookReview.cover = image;
+      });
+    }
+  };
+
+  const onUploadClick = () => {
+    inputRef.current?.click();
+  };
+
+  const remove = () => {
+    bookReview.cover = null;
+  };
+
+  if (bookReview.cover) {
+    return (
+      <div className="group relative inline-block">
+        <BookCoverReadOnly
+          className="transition-opacity group-hover:opacity-40"
+          bookReview={bookReview}
+        />
+        <div className="absolute left-0 top-0 hidden h-full w-full items-center justify-center rounded-l-sm rounded-r-md group-hover:flex">
+          <Button
+            variant="tertiary"
+            type="button"
+            className="shadow"
+            onClick={remove}
+          >
+            Remove
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <BookCoverContainer className="flex w-[180px] flex-col justify-center rounded-l-sm rounded-r-md bg-gray-100 p-3 shadow-lg">
+      <button
+        className="flex h-full w-full flex-col items-center justify-center gap-3 text-gray-500 transition-colors hover:text-gray-600"
+        type="button"
+        onClick={onUploadClick}
+      >
+        <PlusIcon className="h-10 w-10" />
+        Upload book cover
+      </button>
+      <label className="sr-only">
+        Cover
+        <input ref={inputRef} type="file" onChange={onImageChange} />
+      </label>
+    </BookCoverContainer>
+  );
+}
+
+export function BookCover({
+  bookReview,
+  readOnly,
+}: {
+  bookReview: BookReview;
+  readOnly?: boolean;
+}) {
+  if (readOnly) return <BookCoverReadOnly bookReview={bookReview} />;
+
+  return <BookCoverInput bookReview={bookReview} />;
+}

examples/book-shelf/src/components/BookReviewHeader.tsx

@@ -0,0 +1,30 @@
+import { BookCover } from "@/components/BookCover";
+import Rating from "@/components/Rating";
+import RatingInput from "@/components/RatingInput";
+import { BookReview } from "@/schema";
+import { Group } from "jazz-tools";
+
+export function BookReviewHeader({ bookReview }: { bookReview: BookReview }) {
+  const { title, author, rating, review, dateRead } = bookReview;
+
+  return (
+    <div className="grid gap-5">
+      <div>
+        <h1 className="mb-1 font-serif text-2xl font-bold md:mb-3 lg:text-4xl">
+          {title}
+        </h1>
+
+        <p className="text-gray-500">by {author}</p>
+      </div>
+
+      {bookReview._owner.castAs(Group).myRole() === "admin" ? (
+        <RatingInput
+          onChange={(rating) => (bookReview.rating = rating)}
+          value={rating}
+        />
+      ) : (
+        <Rating className="mx-auto text-2xl sm:mx-0" rating={rating} />
+      )}
+    </div>
+  );
+}

examples/book-shelf/src/components/BookReviewThumbnail.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { BookCover, BookCoverReadOnly } from "@/components/BookCover";
+import { useCoState } from "@/components/JazzAndAuth";
+import StarIcon from "@/components/icons/StarIcon";
+import { ID } from "jazz-tools";
+import Link from "next/link";
+import { BookReview } from "../schema";
+
+export function BookReviewThumbnail({ id }: { id: ID<BookReview> }) {
+  const bookReview = useCoState(BookReview, id);
+
+  if (!bookReview) return <></>;
+
+  return (
+    <div className="inline-flex shrink-0 gap-4 rounded border p-4 sm:block sm:space-y-6 sm:border-0 sm:p-0 md:w-[200px]">
+      <Link href={`/book/${bookReview.id}`} className="sm:block sm:flex-1">
+        <BookCoverReadOnly bookReview={bookReview} />
+      </Link>
+
+      <div className="flex-1">
+        <Link href={`/book/${bookReview.id}`}>
+          <h2 className="mb-1 text-sm font-medium">{bookReview.title}</h2>
+        </Link>
+        <div className="mb-2 flex flex-col gap-2 text-sm text-gray-500 sm:flex-row sm:items-center">
+          <p>{bookReview.author}</p>
+          <div className="flex items-center gap-0.5 text-xs font-semibold leading-none">
+            <StarIcon className="-mt-px text-base text-yellow-400" />
+            {bookReview.rating}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

examples/book-shelf/src/components/Button.tsx

@@ -0,0 +1,65 @@
+import clsx from "clsx";
+import Link from "next/link";
+import type { ComponentProps } from "react";
+
+interface Props {
+  variant?: "primary" | "secondary" | "tertiary";
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+interface AnchorProps
+  extends Props,
+    React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+}
+
+type ButtonProps = ComponentProps<"button"> & Props;
+
+export function Button(props: AnchorProps | ButtonProps) {
+  const {
+    className: customClassName = "",
+    variant = "primary",
+    children,
+    size = "md",
+  } = props;
+
+  const variantClassNames = {
+    base: "inline-flex gap-2 items-center justify-center rounded-full overflow-hidden transition-colors",
+    primary:
+      "bg-purple-300 font-medium text-purple-950 px-4 py-2 rounded-full hover:bg-purple-200",
+    secondary:
+      "rounded-full bg-slate-100 font-medium text-slate-600 hover:bg-slate-200",
+    tertiary: "rounded-full bg-white text-purple-950 font-medium",
+  };
+
+  const sizeClassNames = {
+    sm: "py-1.5 px-3 text-sm",
+    md: "py-2 px-5",
+    lg: "py-2 md:py-2.5 px-6 md:text-lg",
+  };
+
+  const className = clsx(
+    customClassName,
+    variantClassNames.base,
+    variantClassNames[variant],
+    sizeClassNames[size],
+  );
+
+  if (!!(props as AnchorProps).href) {
+    const anchorProps = props as AnchorProps;
+    return (
+      <Link href={anchorProps.href} className={className}>
+        {children}
+      </Link>
+    );
+  }
+
+  const buttonProps = props as ButtonProps;
+
+  return (
+    <button {...buttonProps} className={className}>
+      {children}
+    </button>
+  );
+}

examples/book-shelf/src/components/Container.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+
+export function Container({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={clsx("mx-auto max-w-4xl px-4", className)}>{children}</div>
+  );
+}

examples/book-shelf/src/components/JazzAndAuth.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { JazzAccount } from "@/schema";
+import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+
+const Jazz = createJazzReactApp({
+  AccountSchema: JazzAccount,
+});
+
+export const { useAccount, useCoState } = Jazz;
+
+export function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+
+  return (
+    <>
+      <Jazz.Provider
+        auth={auth}
+        // replace `you@example.com` with your email as a temporary API key
+        peer="wss://cloud.jazz.tools/?key=you@example.com"
+      >
+        {children}
+      </Jazz.Provider>
+      {authState.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Jazz Book Shelf" state={authState} />
+      )}
+    </>
+  );
+}

examples/book-shelf/src/components/Nav.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { Container } from "@/components/Container";
+import { useAccount } from "@/components/JazzAndAuth";
+import Link from "next/link";
+
+export function Nav() {
+  const { me, logOut } = useAccount();
+
+  return (
+    <nav className="border-b py-3">
+      <Container className="flex items-center justify-between gap-12 text-sm">
+        <Link href="/" className="font-serif text-lg font-semibold">
+          Jazz Book Shelf
+        </Link>
+        <div className="flex items-center gap-4 text-sm">
+          <p>{me?.profile?.name}</p>
+          <Button variant="secondary" onClick={logOut}>
+            Log out
+          </Button>
+        </div>
+      </Container>
+    </nav>
+  );
+}

examples/book-shelf/src/components/Rating.tsx

@@ -0,0 +1,21 @@
+import StarIcon from "@/components/icons/StarIcon";
+import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
+
+export default function Rating({
+  rating,
+  className = "",
+}: {
+  rating?: number;
+  className?: string;
+}) {
+  const max = 5;
+  const outline = max - (rating || 0);
+  return (
+    <div className={`inline-flex gap-0.5 text-yellow-400 ${className}`}>
+      {rating ? [...Array(rating)].map((x, i) => <StarIcon key={i} />) : <></>}
+      {[...Array(outline)].map((x, i) => (
+        <StarOutlineIcon key={i} />
+      ))}
+    </div>
+  );
+}

examples/book-shelf/src/components/RatingInput.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import StarIcon from "@/components/icons/StarIcon";
+import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
+import clsx from "clsx";
+
+interface RatingInputProps {
+  value?: number;
+  onChange: (value: number) => void;
+  className?: string;
+}
+
+export default function RatingInput({
+  value = 0,
+  onChange,
+  className,
+}: RatingInputProps) {
+  const handleChange = (newRating: number) => {
+    onChange(newRating > 5 ? 5 : newRating);
+  };
+
+  return (
+    <div className={clsx(className, "flex gap-0.5 text-2xl text-yellow-400")}>
+      {[...Array(5)].map((_, i) => {
+        return i < value ? (
+          <button
+            type="button"
+            className="focus:outline-none"
+            onClick={() => handleChange(i + 1)}
+            key={i}
+          >
+            <StarIcon />
+          </button>
+        ) : (
+          <button
+            type="button"
+            className="focus:outline-none"
+            onClick={() => handleChange(i + 1)}
+            key={i}
+          >
+            <StarOutlineIcon />
+          </button>
+        );
+      })}
+    </div>
+  );
+}

examples/book-shelf/src/components/UserProfile.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { BookReviewThumbnail } from "@/components/BookReviewThumbnail";
+import { Button } from "@/components/Button";
+import { useCoState } from "@/components/JazzAndAuth";
+import { JazzAccount, JazzProfile, ListOfBookReviews } from "@/schema";
+import { Group, ID } from "jazz-tools";
+
+export default function UserProfile({ id }: { id: ID<JazzAccount> }) {
+  const user = useCoState(JazzAccount, id);
+  const profile = useCoState(JazzProfile, user?.profile?.id);
+
+  const bookReviews = useCoState(
+    ListOfBookReviews,
+    user?.profile?._refs.bookReviews?.id,
+    [{}],
+  );
+
+  return (
+    <div className="grid gap-4">
+      <div className="flex items-center justify-between">
+        <h1 className="font-serif text-lg font-medium sm:text-2xl">
+          {profile?.name}&apos;s book shelf
+        </h1>
+        {profile?._owner.castAs(Group).myRole() === "admin" && (
+          <Button href="/add" variant="primary">
+            Add book
+          </Button>
+        )}
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-4">
+        {bookReviews?.map((bookReview) => (
+          <BookReviewThumbnail key={bookReview.id} id={bookReview.id} />
+        ))}
+      </div>
+    </div>
+  );
+}

examples/book-shelf/src/components/icons/PlusIcon.tsx

@@ -1,4 +1,4 @@
-export function LinkIcon() {
+export default function PlusIcon({ className }: { className?: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -6,12 +6,14 @@ export function LinkIcon() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-3 h-3"
+      className={className}
+      width="1em"
+      height="1em"
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+        d="M12 4.5v15m7.5-7.5h-15"
       />
     </svg>
   );

examples/book-shelf/src/components/icons/StarIcon.tsx

@@ -0,0 +1,18 @@
+export default function StarIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+      width="1em"
+      height="1em"
+    >
+      <path
+        fillRule="evenodd"
+        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

examples/book-shelf/src/components/icons/StarOutlineIcon.tsx

@@ -0,0 +1,20 @@
+export default function StarOutlineIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+      width="1em"
+      height="1em"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
+      />
+    </svg>
+  );
+}

examples/book-shelf/src/schema.ts

@@ -0,0 +1,37 @@
+import {
+  Account,
+  CoList,
+  CoMap,
+  Encoders,
+  ImageDefinition,
+  Profile,
+  co,
+} from "jazz-tools";
+
+export class BookReview extends CoMap {
+  title = co.string;
+  author = co.string;
+  rating = co.number;
+  dateRead? = co.encoded(Encoders.Date);
+  review? = co.string;
+  cover? = co.ref(ImageDefinition, { optional: true });
+}
+
+export class ListOfBookReviews extends CoList.Of(co.ref(BookReview)) {}
+
+/** The profile is an app-specific per-user public `CoMap`
+ *  where you can store top-level objects for that user */
+export class JazzProfile extends Profile {
+  bookReviews = co.ref(ListOfBookReviews);
+}
+
+export class JazzAccount extends Account {
+  profile = co.ref(JazzProfile);
+
+  /** The account migration is run on account creation and on every log-in.
+   *  You can use it to set up the account root and any other initial CoValues you need.
+   */
+  migrate(this: JazzAccount, creationProps?: { name: string }) {
+    super.migrate(creationProps);
+  }
+}

examples/book-shelf/tailwind.config.ts

@@ -0,0 +1,25 @@
+import type { Config } from "tailwindcss";
+const colors = require("tailwindcss/colors");
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        serif: ["var(--font-fraunces)"],
+      },
+      colors: {
+        purple: {
+          ...colors.purple,
+          950: "#211f5a",
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

examples/book-shelf/tsconfig.json

@@ -3,27 +3,26 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
+    "allowJs": true,
     "skipLibCheck": true,
-
-    /* Bundler mode */
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

examples/briscola/.gitignore

@@ -0,0 +1,21 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+.vinxi
+.output
+.vercel
+.netlify
+.wrangler
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+
+.env

examples/briscola/components.json

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

examples/briscola/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" class="bg-green-800">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Router</title>
+    
+  </head>
+
+  <body class="">
+    <div id="app" class="h-screen overflow-hidden"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/briscola/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "jazz-example-briscola",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "dev": "vite --port=3001",
+    "dev:worker": "vite-node --config vite.server.ts ./src/worker.ts",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "devDependencies": {
+    "@tanstack/router-plugin": "^1.87.13",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.16",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
+    "vite": "^6.0.3",
+    "vite-node": "^2.1.8"
+  },
+  "dependencies": {
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@tanstack/react-router": "^1.87.12",
+    "@tanstack/router-devtools": "^1.87.12",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "jazz-nodejs": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "lucide-react": "^0.468.0",
+    "motion": "^11.14.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7"
+  }
+}

examples/briscola/src/.env.example

@@ -0,0 +1,2 @@
+JAZZ_WORKER_ACCOUNT=
+JAZZ_WORKER_SECRET=

examples/briscola/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    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";
+
+export { Button, buttonVariants };

examples/briscola/src/components/ui/card.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

examples/briscola/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ 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-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

examples/briscola/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

examples/briscola/src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

examples/briscola/src/credentials.ts

@@ -0,0 +1,8 @@
+import { Account } from "jazz-tools";
+import { ID } from "jazz-tools";
+
+export const workerCredentials = {
+  accountID: "co_zftnYbkfXZKmSVQHLBjFojVSkah" as ID<Account>,
+  agentSecret:
+    "sealerSecret_zBqjaGpQWUffMSSuJTzj3qBuBgnZyB7HpL2wsnqUkapSL/signerSecret_zE6wD4rJFe4LLAbn6MPDV9ie7wSGfixnzugc8yRBXXyc1",
+};

examples/briscola/src/index.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/briscola/src/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/briscola/src/main.tsx

@@ -0,0 +1,46 @@
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+import { createRoot } from "react-dom/client";
+import { routeTree } from "./routeTree.gen";
+import "./index.css";
+
+const Jazz = createJazzReactApp();
+export const { useAccount, useCoState, useAcceptInvite, useAccountInbox } =
+  Jazz;
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+  return (
+    <>
+      <Jazz.Provider
+        auth={auth}
+        // replace `you@example.com` with your email as a temporary API key
+        peer="ws://localhost:4200"
+      >
+        {children}
+      </Jazz.Provider>
+      <DemoAuthBasicUI appName="Planning Poker" state={authState} />
+    </>
+  );
+}
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  Wrap: JazzAndAuth,
+});
+
+// Register things for typesafety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById("app")!;
+
+if (!rootElement.innerHTML) {
+  const root = createRoot(rootElement);
+  root.render(<RouterProvider router={router} />);
+}

examples/briscola/src/routeTree.gen.ts

@@ -0,0 +1,111 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from "./routes/__root";
+import { Route as GameGameIdImport } from "./routes/game/$gameId";
+import { Route as IndexImport } from "./routes/index";
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+  id: "/",
+  path: "/",
+  getParentRoute: () => rootRoute,
+} as any);
+
+const GameGameIdRoute = GameGameIdImport.update({
+  id: "/game/$gameId",
+  path: "/game/$gameId",
+  getParentRoute: () => rootRoute,
+} as any);
+
+// Populate the FileRoutesByPath interface
+
+declare module "@tanstack/react-router" {
+  interface FileRoutesByPath {
+    "/": {
+      id: "/";
+      path: "/";
+      fullPath: "/";
+      preLoaderRoute: typeof IndexImport;
+      parentRoute: typeof rootRoute;
+    };
+    "/game/$gameId": {
+      id: "/game/$gameId";
+      path: "/game/$gameId";
+      fullPath: "/game/$gameId";
+      preLoaderRoute: typeof GameGameIdImport;
+      parentRoute: typeof rootRoute;
+    };
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  "/": typeof IndexRoute;
+  "/game/$gameId": typeof GameGameIdRoute;
+}
+
+export interface FileRoutesByTo {
+  "/": typeof IndexRoute;
+  "/game/$gameId": typeof GameGameIdRoute;
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute;
+  "/": typeof IndexRoute;
+  "/game/$gameId": typeof GameGameIdRoute;
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath;
+  fullPaths: "/" | "/game/$gameId";
+  fileRoutesByTo: FileRoutesByTo;
+  to: "/" | "/game/$gameId";
+  id: "__root__" | "/" | "/game/$gameId";
+  fileRoutesById: FileRoutesById;
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute;
+  GameGameIdRoute: typeof GameGameIdRoute;
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  GameGameIdRoute: GameGameIdRoute,
+};
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>();
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/game/$gameId"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/game/$gameId": {
+      "filePath": "game/$gameId.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

examples/briscola/src/routes/__root.tsx

@@ -0,0 +1,15 @@
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+
+export const Route = createRootRoute({
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools position="bottom-right" />
+    </>
+  );
+}

examples/briscola/src/routes/game/$gameId.tsx

@@ -0,0 +1,191 @@
+import { cn } from "@/lib/utils";
+import { useAccount, useCoState } from "@/main";
+import { type Card, CardList, type CardValue, Game, Player } from "@/schema";
+import { createFileRoute } from "@tanstack/react-router";
+import type { ID, co } from "jazz-tools";
+import { AnimatePresence, Reorder, motion } from "motion/react";
+import { type ReactNode, useState } from "react";
+import bastoni from "../../bastoni.svg?url";
+import coppe from "../../coppe.svg?url";
+import denari from "../../denari.svg?url";
+import spade from "../../spade.svg?url";
+
+export const Route = createFileRoute("/game/$gameId")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { gameId } = Route.useParams();
+  const game = useCoState(Game, gameId as ID<Game>, {
+    deck: [{}],
+    player1: {
+      account: {},
+    },
+    player2: {
+      account: {},
+    },
+    activePlayer: {},
+  });
+  const { me } = useAccount();
+
+  // TODO: loading
+
+  const currentPlayerId =
+    game?.player1.account.id === me.id ? game.player1.id : game?.player2.id;
+
+  const currentPlayer = useCoState(Player, currentPlayerId, {
+    hand: [{}],
+    scoredCards: [{}],
+    giocata: {},
+  });
+
+  if (!game || !currentPlayer) return null;
+
+  return (
+    <div className="flex flex-col h-full p-2 bg-green-800">
+      <PlayerArea player={currentPlayer}>
+        <Reorder.Group
+          axis="x"
+          values={currentPlayer.hand}
+          onReorder={(cards) => {
+            currentPlayer.hand = CardList.create(cards, {
+              owner: currentPlayer.hand._owner,
+            });
+          }}
+        >
+          <div className="flex place-content-center gap-2">
+            {currentPlayer.hand.map((card) => (
+              <Reorder.Item key={card.value} value={card}>
+                <PlayingCard card={card} />
+              </Reorder.Item>
+            ))}
+          </div>
+        </Reorder.Group>
+      </PlayerArea>
+
+      <div className="grow items-center justify-center flex ">
+        <>
+          {game.deck[0] && (
+            <PlayingCard
+              className="rotate-[88deg] left-1/2 absolute"
+              card={game.deck[0]}
+            />
+          )}
+          <CardStack cards={game.deck} className="" />
+        </>
+      </div>
+
+      <PlayerArea player={game.player1}>
+        <Reorder.Group
+          axis="x"
+          values={game.player1.hand}
+          onReorder={(cards) => {
+            // TODO: this is weird AF
+            // @ts-expect-error
+            game.player1.hand = CardList.create(cards, {
+              owner: game.player1.hand._owner,
+            });
+          }}
+        >
+          <div className="flex place-content-center gap-2">
+            {game.player1.hand.map((card) => (
+              <Reorder.Item key={card.value} value={card}>
+                <PlayingCard card={card} />
+              </Reorder.Item>
+            ))}
+          </div>
+        </Reorder.Group>
+      </PlayerArea>
+    </div>
+  );
+}
+
+interface CardStackProps {
+  cards: CardList;
+  className?: string;
+}
+function CardStack({ cards, className }: CardStackProps) {
+  return (
+    <div className={cn("relative p-4 w-[200px] h-[280px]", className)}>
+      <AnimatePresence>
+        {cards.map((card, i) => (
+          <motion.div
+            initial={{ left: -1000 }}
+            animate={{ left: 0 }}
+            transition={{ delay: i * 0.05 }}
+            key={i}
+            className="w-[150px] aspect-card absolute border border-gray-200/10 rounded-lg bg-white drop-shadow-sm"
+            style={{
+              rotate: `${(i % 3) * (i % 5) * 3}deg`,
+              backgroundImage: `url(https://placecats.com/150/243)`,
+              backgroundSize: "cover",
+            }}
+          >
+            {card?.value}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+interface Props {
+  card: co<Card>;
+  className?: string;
+}
+function PlayingCard({ card, className }: Props) {
+  const cardImage = getCardImage(card.value);
+  const value = getValue(card.value);
+
+  return (
+    <motion.div
+      className={cn(
+        "border aspect-card w-[150px] bg-white touch-none rounded-lg shadow-lg p-2",
+        className,
+      )}
+    >
+      <div className="border-zinc-400 border rounded-lg h-full px-1 flex flex-col ">
+        <div className="text-4xl font-bold text-black self-start">{value}</div>
+        <div className="grow flex justify-center items-center">
+          <img src={cardImage} className="pointer-events-none max-h-[140px]" />
+        </div>
+        <div className="text-4xl font-bold text-black rotate-180 transform self-end">
+          {value}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+function getCardImage(cardValue: typeof CardValue) {
+  switch (cardValue.charAt(0)) {
+    case "C":
+      return coppe;
+    case "D":
+      return denari;
+    case "S":
+      return spade;
+    case "B":
+      return bastoni;
+  }
+}
+
+function getValue(card: typeof CardValue) {
+  return card.charAt(1);
+}
+
+interface PlayerAreaProps {
+  player: Player;
+  children: ReactNode;
+}
+function PlayerArea({ children, player }: PlayerAreaProps) {
+  return (
+    <div className="grid grid-cols-3">
+      <div></div>
+      {children}
+      <div className="flex justify-center">
+        <CardStack cards={player.scoredCards} className="rotate-90" />
+      </div>
+    </div>
+  );
+}

examples/briscola/src/routes/index.tsx

@@ -0,0 +1,143 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { workerCredentials } from "@/credentials";
+import {
+  useAcceptInvite,
+  useAccount,
+  useAccountInbox,
+  useCoState,
+} from "@/main";
+import { WaitingRoom } from "@/schema";
+import { StartGameMessage } from "@/types";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { createInviteLink } from "jazz-react";
+import { Group, ID } from "jazz-tools";
+import { useEffect, useState } from "react";
+
+export const Route = createFileRoute("/")({
+  component: HomeComponent,
+});
+
+function HomeComponent() {
+  const { me } = useAccount();
+  const inbox = useAccountInbox<StartGameMessage>(workerCredentials.accountID);
+  const navigate = useNavigate({ from: "/" });
+  const [waitingRoomId, setWaitingRoomId] = useState<
+    ID<WaitingRoom> | undefined
+  >(undefined);
+  const [inviteLink, setInviteLink] = useState<string | null>(null);
+  const waitingRoom = useCoState(WaitingRoom, waitingRoomId, {
+    player1Account: {},
+    player2Account: {},
+  });
+
+  useAcceptInvite({
+    invitedObjectSchema: WaitingRoom,
+    onAccept: (waitingRoom) => {
+      setWaitingRoomId(waitingRoom);
+    },
+  });
+
+  const onNewGameClick = () => {
+    const group = Group.create({ owner: me });
+    const waitingRoom = WaitingRoom.create(
+      {
+        player1Account: me,
+        player2Account: null,
+      },
+      { owner: group },
+    );
+    setWaitingRoomId(waitingRoom.id);
+    setInviteLink(createInviteLink(waitingRoom, "writer"));
+
+    const unsubscribe = waitingRoom.subscribe({}, (waitingRoom) => {
+      if (waitingRoom._refs.player2Account) {
+        console.log("sendMessage", waitingRoom.id);
+        inbox.sendMessage({ type: "startGame", value: waitingRoom.id });
+        unsubscribe();
+      }
+    });
+  };
+
+  const isPlayer1 = waitingRoom?.player1Account?.id === me.id;
+  const hasPlayer2 = !!waitingRoom?.player2Account;
+
+  useEffect(() => {
+    if (waitingRoom?.id && !isPlayer1 && !hasPlayer2) {
+      waitingRoom.player2Account = me;
+    }
+  }, [waitingRoom?.id, isPlayer1, hasPlayer2]);
+
+  useEffect(() => {
+    if (waitingRoom?.game) {
+      navigate({ to: `/game/${waitingRoom.game.id}` });
+    }
+  }, [waitingRoom]);
+
+  if (waitingRoom) {
+    if (waitingRoom.player2Account) {
+      return (
+        <div className="h-screen flex flex-col w-full place-items-center justify-center p-2">
+          <Card className="w-[500px]">
+            <CardHeader>
+              <CardTitle>Waiting for game to start</CardTitle>
+            </CardHeader>
+          </Card>
+        </div>
+      );
+    }
+
+    return (
+      <div className="h-screen flex flex-col w-full place-items-center justify-center p-2">
+        <Card className="w-[500px]">
+          <CardHeader>
+            <CardTitle>Waiting for player 2</CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <div className="flex items-center space-x-4">
+              <div className="w-1/2 flex flex-col p-4">
+                Invite link: <p>{inviteLink}</p>
+              </div>
+            </div>
+            <Separator />
+            <div className="p-4">
+              <Button variant="link">How to play?</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen flex flex-col w-full place-items-center justify-center p-2">
+      <Card className="w-[500px]">
+        <CardHeader>
+          <CardTitle>Welcome to Jazz Briscola</CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="flex items-center space-x-4">
+            <div className="w-1/2 flex flex-col p-4">
+              <Button onClick={onNewGameClick}>New Game</Button>
+            </div>
+            <Separator orientation="vertical" className="h-40" />
+            <div className="w-1/2 flex flex-col space-y-4 p-4">
+              <div className="flex flex-col space-y-2">
+                <Label htmlFor="picture">Game ID</Label>
+                <Input id="picture" placeholder="co_XXXXXXXXXXX" />
+              </div>
+              <Button>Join</Button>
+            </div>
+          </div>
+          <Separator />
+          <div className="p-4">
+            <Button variant="link">How to play?</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

examples/briscola/src/schema.ts

@@ -0,0 +1,89 @@
+import {
+  Account,
+  CoFeed,
+  CoList,
+  CoMap,
+  ID,
+  SchemaUnion,
+  co,
+} from "jazz-tools";
+
+export const CardValues = [
+  "S1",
+  "S2",
+  "S3",
+  "S4",
+  "S5",
+  "S6",
+  "S7",
+  "S8",
+  "S9",
+  "S10",
+  "C1",
+  "C2",
+  "C3",
+  "C4",
+  "C5",
+  "C6",
+  "C7",
+  "C8",
+  "C9",
+  "C10",
+  "D1",
+  "D2",
+  "D3",
+  "D4",
+  "D5",
+  "D6",
+  "D7",
+  "D8",
+  "D9",
+  "D10",
+  "B1",
+  "B2",
+  "B3",
+  "B4",
+  "B5",
+  "B6",
+  "B7",
+  "B8",
+  "B9",
+  "B10",
+] as const;
+
+export const CardValue = co.literal(...CardValues);
+
+export class Card extends CoMap {
+  value = CardValue;
+}
+
+export class CardContainer extends CoMap {
+  value = co.optional.literal(...CardValues);
+}
+
+export class CardList extends CoList.Of(co.ref(Card)) {}
+
+export class Player extends CoMap {
+  account = co.ref(Account);
+  giocata = co.ref(CardContainer); // write Tavolo - write me - quando un giocatore gioca una carta la scrive qui, il Game la legge, la valida e la mette sul tavolo
+  hand = co.ref(CardList); // write Tavolo - read me - quando il Game mi da le carte le scrive qui, quando valida la giocata la toglie da qui
+  scoredCards = co.ref(CardList); // write Tavolo - read everyone -
+}
+
+export class Game extends CoMap {
+  deck = co.ref(CardList);
+
+  // briscola? = co.literal("A", "B", "C", "D");
+  //
+  // tavolo? = co.ref(Card);
+
+  activePlayer = co.ref(Player);
+  player1 = co.ref(Player);
+  player2 = co.ref(Player);
+}
+
+export class WaitingRoom extends CoMap {
+  player1Account = co.ref(Account);
+  player2Account = co.optional.ref(Account);
+  game = co.optional.ref(Game);
+}

examples/briscola/src/types.ts

@@ -0,0 +1,7 @@
+import { ID } from "jazz-tools";
+import { WaitingRoom } from "./schema";
+
+export type StartGameMessage = {
+  type: "startGame";
+  value: ID<WaitingRoom>;
+};

examples/briscola/src/worker.ts

@@ -0,0 +1,145 @@
+import {
+  Card,
+  CardContainer,
+  CardList,
+  CardValues,
+  Game,
+  Player,
+  WaitingRoom,
+} from "@/schema";
+import { startWorker } from "jazz-nodejs";
+import { Account, Group, ID } from "jazz-tools";
+import { workerCredentials } from "./credentials";
+import { StartGameMessage } from "./types";
+
+const { worker } = await startWorker({
+  accountID: workerCredentials.accountID,
+  accountSecret: workerCredentials.agentSecret,
+  onInboxMessage,
+  syncServer: "ws://localhost:4200",
+});
+
+console.log("Listening for new games on inbox", workerCredentials.accountID);
+
+async function onInboxMessage({ value: id }: StartGameMessage) {
+  const waitingRoom = await WaitingRoom.load(id, worker, {});
+
+  if (!waitingRoom?._refs.player1Account) {
+    throw new Error("Player 1 account not found");
+  }
+
+  if (!waitingRoom?._refs.player2Account) {
+    throw new Error("Player 2 account not found");
+  }
+
+  await waitingRoom?.ensureLoaded({
+    player1Account: {},
+    player2Account: {},
+  });
+
+  if (!waitingRoom) {
+    throw new Error("Failed to load the waiting room");
+  }
+
+  if (!waitingRoom.player1Account) {
+    throw new Error("Player 1 account not found");
+  }
+
+  if (!waitingRoom.player2Account) {
+    throw new Error("Player 2 account not found");
+  }
+
+  const player1Account = waitingRoom.player1Account;
+  const player2Account = waitingRoom.player2Account;
+
+  const readOnlyGroup = Group.create({ owner: worker });
+  readOnlyGroup.addMember(player1Account, "reader");
+  readOnlyGroup.addMember(player2Account, "reader");
+
+  const p1WriteGroup = Group.create({ owner: worker });
+  p1WriteGroup.addMember(player1Account, "writer");
+  const p1ReadOnlyGroup = Group.create({ owner: worker });
+  p1ReadOnlyGroup.addMember(player1Account, "reader");
+  const readOnlyOwnership = { owner: readOnlyGroup };
+  const p1WriteOwnership = { owner: p1WriteGroup };
+  const p1ReadOnlyOwnership = { owner: p1ReadOnlyGroup };
+
+  const p2WriteGroup = Group.create({ owner: worker });
+  p2WriteGroup.addMember(player2Account, "writer");
+  const p2ReadOnlyGroup = Group.create({ owner: worker });
+  p2ReadOnlyGroup.addMember(player2Account, "reader");
+  const p2WriteOwnership = { owner: p2WriteGroup };
+  const p2ReadOnlyOwnership = { owner: p2ReadOnlyGroup };
+
+  const deck = CardValues.map((value) =>
+    Card.create({ value }, { owner: Group.create({ owner: worker }) }),
+  );
+
+  const player1 = Player.create(
+    {
+      account: player1Account,
+      hand: CardList.create([], p1ReadOnlyOwnership),
+      scoredCards: CardList.create([], p1ReadOnlyOwnership),
+      giocata: CardContainer.create({}, p1WriteOwnership),
+    },
+    p1ReadOnlyOwnership,
+  );
+
+  const player2 = Player.create(
+    {
+      account: player2Account,
+      hand: CardList.create([], p2ReadOnlyOwnership),
+      scoredCards: CardList.create([], p2ReadOnlyOwnership),
+      giocata: CardContainer.create({}, p2WriteOwnership),
+    },
+    p2ReadOnlyOwnership,
+  );
+
+  const game = Game.create(
+    {
+      deck: CardList.create(deck, readOnlyOwnership),
+      player1,
+      player2,
+      activePlayer: Math.random() < 0.5 ? player1 : player2,
+    },
+    readOnlyOwnership,
+  );
+
+  waitingRoom.game = game;
+  console.log("Starting game", game.id);
+  await startGame(game as FullGame);
+}
+
+type FullGame = {
+  player1: {
+    account: Account;
+    hand: CardList;
+    scoredCards: CardList;
+    giocata: CardContainer;
+  } & Player;
+  player2: {
+    account: Account;
+    hand: CardList;
+    scoredCards: CardList;
+    giocata: CardContainer;
+  } & Player;
+  deck: CardList;
+} & Game;
+
+async function startGame(game: FullGame) {
+  drawCards(game, "player1");
+  drawCards(game, "player2");
+}
+
+function drawCards(game: FullGame, playerKey: "player1" | "player2") {
+  const player = game[playerKey];
+  while (player.hand.length < 3) {
+    const card = game.deck.shift();
+    if (!card) {
+      return;
+    }
+    const cardGroup = card._owner.castAs(Group);
+    cardGroup.addMember(player.account, "reader");
+    player.hand.push(card);
+  }
+}

examples/briscola/tailwind.config.js

@@ -0,0 +1,61 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+      },
+
+      aspectRatio: {
+        card: "2584/4181",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};

examples/briscola/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/briscola/vite.config.ts

@@ -0,0 +1,14 @@
+import { resolve } from "path";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [TanStackRouterVite({}), react()],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+});

examples/briscola/vite.server.ts

@@ -0,0 +1,11 @@
+import { resolve } from "path";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+});

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,261 +1,5 @@
 # chat-rn-clerk
 
-## 1.0.58
-
-### Patch Changes
-
-- Updated dependencies [c2ca1fe]
-- Updated dependencies [1227047]
-  - jazz-tools@0.9.17
-  - jazz-react-native@0.9.17
-  - jazz-react-native-auth-clerk@0.9.17
-  - jazz-react-native-media-images@0.9.17
-
-## 1.0.57
-
-### Patch Changes
-
-- Updated dependencies [24b3b6a]
-  - jazz-react-native-auth-clerk@0.9.16
-  - jazz-tools@0.9.16
-  - jazz-react-native@0.9.16
-  - jazz-react-native-media-images@0.9.16
-
-## 1.0.56
-
-### Patch Changes
-
-- Updated dependencies [7491711]
-  - jazz-tools@0.9.15
-  - jazz-react-native@0.9.15
-  - jazz-react-native-auth-clerk@0.9.15
-  - jazz-react-native-media-images@0.9.15
-
-## 1.0.55
-
-### Patch Changes
-
-- Updated dependencies [3df93cc]
-  - jazz-tools@0.9.14
-  - jazz-react-native@0.9.14
-  - jazz-react-native-auth-clerk@0.9.14
-  - jazz-react-native-media-images@0.9.14
-
-## 1.0.54
-
-### Patch Changes
-
-- jazz-react-native@0.9.13
-- jazz-react-native-auth-clerk@0.9.13
-- jazz-tools@0.9.13
-- jazz-react-native-media-images@0.9.13
-
-## 1.0.53
-
-### Patch Changes
-
-- jazz-react-native@0.9.12
-- jazz-react-native-auth-clerk@0.9.12
-- jazz-tools@0.9.12
-- jazz-react-native-media-images@0.9.12
-
-## 1.0.52
-
-### Patch Changes
-
-- jazz-react-native@0.9.11
-- jazz-react-native-auth-clerk@0.9.11
-- jazz-tools@0.9.11
-- jazz-react-native-media-images@0.9.11
-
-## 1.0.51
-
-### Patch Changes
-
-- f76274c: Fix image handling in react-native
-- Updated dependencies [f76274c]
-- Updated dependencies [5e83864]
-  - jazz-react-native@0.9.10
-  - jazz-tools@0.9.10
-  - jazz-react-native-auth-clerk@0.9.10
-  - jazz-react-native-media-images@0.9.10
-
-## 1.0.50
-
-### Patch Changes
-
-- Updated dependencies [8eb9247]
-  - jazz-tools@0.9.9
-  - jazz-react-native@0.9.9
-  - jazz-react-native-auth-clerk@0.9.9
-  - jazz-react-native-media-images@0.9.9
-
-## 1.0.49
-
-### Patch Changes
-
-- Updated dependencies [d1d773b]
-  - jazz-tools@0.9.8
-  - jazz-react-native@0.9.8
-  - jazz-react-native-auth-clerk@0.9.8
-  - jazz-react-native-media-images@0.9.8
-
-## 1.0.48
-
-### Patch Changes
-
-- Updated dependencies [8a390d2]
-  - jazz-react-native@0.9.6
-  - jazz-react-native-auth-clerk@0.9.6
-
-## 1.0.47
-
-### Patch Changes
-
-- Updated dependencies [c871912]
-  - jazz-react-native@0.9.5
-  - jazz-react-native-auth-clerk@0.9.5
-
-## 1.0.46
-
-### Patch Changes
-
-- jazz-react-native@0.9.4
-- jazz-react-native-auth-clerk@0.9.4
-
-## 1.0.45
-
-### Patch Changes
-
-- Updated dependencies [7cd691f]
-  - jazz-react-native@0.9.3
-  - jazz-react-native-auth-clerk@0.9.3
-
-## 1.0.44
-
-### Patch Changes
-
-- Updated dependencies [80fd3e9]
-  - jazz-react-native@0.9.2
-  - jazz-react-native-auth-clerk@0.9.2
-
-## 1.0.43
-
-### Patch Changes
-
-- Updated dependencies [1b71969]
-  - jazz-tools@0.9.1
-  - jazz-react-native@0.9.1
-  - jazz-react-native-auth-clerk@0.9.1
-  - jazz-react-native-media-images@0.9.1
-
-## 1.0.42
-
-### Patch Changes
-
-- Updated dependencies [1da4d55]
-- Updated dependencies [8eda792]
-- Updated dependencies [1e5e3a1]
-  - jazz-react-native@0.9.0
-  - jazz-tools@0.9.0
-  - jazz-react-native-auth-clerk@0.9.0
-  - jazz-react-native-media-images@0.9.0
-
-## 1.0.41
-
-### Patch Changes
-
-- Updated dependencies [dc62b95]
-- Updated dependencies [1de26f8]
-  - jazz-tools@0.8.51
-  - jazz-react-native@0.8.51
-  - jazz-react-native-auth-clerk@0.8.51
-  - jazz-react-native-media-images@0.8.51
-
-## 1.0.40
-
-### Patch Changes
-
-- jazz-react-native@0.8.50
-- jazz-react-native-auth-clerk@0.8.50
-- jazz-tools@0.8.50
-- jazz-react-native-media-images@0.8.50
-
-## 1.0.39
-
-### Patch Changes
-
-- jazz-react-native@0.8.49
-- jazz-react-native-auth-clerk@0.8.49
-- jazz-tools@0.8.49
-- jazz-react-native-media-images@0.8.49
-
-## 1.0.38
-
-### Patch Changes
-
-- Updated dependencies [635e824]
-- Updated dependencies [0a85982]
-  - jazz-tools@0.8.48
-  - jazz-react-native@0.8.48
-  - jazz-react-native-auth-clerk@0.8.48
-  - jazz-react-native-media-images@0.8.48
-
-## 1.0.37
-
-### Patch Changes
-
-- Updated dependencies [33ef9c4]
-  - jazz-react-native@0.8.47
-  - jazz-react-native-auth-clerk@0.8.47
-
-## 1.0.36
-
-### Patch Changes
-
-- Updated dependencies [ab4ffbd]
-  - jazz-react-native@0.8.46
-  - jazz-react-native-auth-clerk@0.8.46
-
-## 1.0.35
-
-### Patch Changes
-
-- Updated dependencies [7701307]
-- Updated dependencies [fa41f8e]
-- Updated dependencies [88d7d9a]
-- Updated dependencies [60e35ea]
-  - jazz-react-native@0.8.45
-  - jazz-tools@0.8.45
-  - jazz-react-native-auth-clerk@0.8.45
-  - jazz-react-native-media-images@0.8.45
-
-## 1.0.34
-
-### Patch Changes
-
-- jazz-react-native@0.8.44
-- jazz-react-native-auth-clerk@0.8.44
-- jazz-tools@0.8.44
-- jazz-react-native-media-images@0.8.44
-
-## 1.0.33
-
-### Patch Changes
-
-- cdc7f9f: Fixing react-native examples
-- Updated dependencies [cdc7f9f]
-  - jazz-react-native-auth-clerk@0.8.43
-
-## 1.0.32
-
-### Patch Changes
-
-- jazz-react-native@0.8.41
-- jazz-react-native-auth-clerk@0.8.41
-- jazz-tools@0.8.41
-- jazz-react-native-media-images@0.8.41
-
 ## 1.0.31
 
 ### Patch Changes

examples/chat-rn-clerk/app.json

@@ -37,13 +37,7 @@
       ],
       "expo-secure-store",
       "expo-font",
-      "expo-router",
-      [
-        "expo-image-picker",
-        {
-          "photosPermission": "The app accesses your photos to let you share them with your friends."
-        }
-      ]
+      "expo-router"
     ],
     "extra": {
       "eas": {

examples/chat-rn-clerk/app/_layout.tsx

@@ -1,4 +1,3 @@
-import "../global.css";
 import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-expo";
 import { useFonts } from "expo-font";
 import { Slot } from "expo-router";

examples/chat-rn-clerk/app/chat/[chatId].tsx

@@ -1,12 +1,9 @@
+import { useAccount, useCoState } from "@/src/jazz";
 import { Chat, Message } from "@/src/schema";
-import { useNavigation } from "@react-navigation/native";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import clsx from "clsx";
 import * as Clipboard from "expo-clipboard";
-import * as ImagePicker from "expo-image-picker";
 import { useLocalSearchParams } from "expo-router";
-import { useAccount, useCoState } from "jazz-react-native";
-import { ProgressiveImg } from "jazz-react-native";
-import { createImage } from "jazz-react-native-media-images";
 import { Group, ID } from "jazz-tools";
 import { useEffect, useLayoutEffect, useState } from "react";
 import React, {
@@ -19,8 +16,6 @@ import React, {
   KeyboardAvoidingView,
   TextInput,
   Button,
-  Image,
-  ActivityIndicator,
 } from "react-native";
 
 export default function Conversation() {
@@ -30,7 +25,6 @@ export default function Conversation() {
   const [message, setMessage] = useState("");
   const loadedChat = useCoState(Chat, chat?.id, [{}]);
   const navigation = useNavigation();
-  const [isUploading, setIsUploading] = useState(false);
 
   useEffect(() => {
     if (chat) return;
@@ -87,32 +81,6 @@ export default function Conversation() {
     }
   };
 
-  const handleImageUpload = async () => {
-    try {
-      const result = await ImagePicker.launchImageLibraryAsync({
-        mediaTypes: ImagePicker.MediaTypeOptions.Images,
-        base64: true,
-        quality: 0.7,
-      });
-
-      if (!result.canceled && result.assets[0].base64 && chat) {
-        setIsUploading(true);
-        const base64Uri = `data:image/jpeg;base64,${result.assets[0].base64}`;
-
-        const image = await createImage(base64Uri, {
-          owner: chat._owner,
-          maxSize: 2048,
-        });
-
-        chat.push(Message.create({ text: "", image }, { owner: chat._owner }));
-      }
-    } catch (error) {
-      Alert.alert("Error", "Failed to upload image");
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
   const renderMessageItem = ({ item }: { item: Message }) => {
     const isMe = item._edits.text.by?.isMe;
     return (
@@ -138,27 +106,14 @@ export default function Conversation() {
             isMe ? "flex-row" : "flex-row",
           )}
         >
-          {item.image && (
-            <ProgressiveImg image={item.image} maxWidth={1024}>
-              {({ src, res, originalSize }) => (
-                <Image
-                  source={{ uri: src }}
-                  className="w-48 h-48 rounded-lg mb-2"
-                  resizeMode="cover"
-                />
-              )}
-            </ProgressiveImg>
-          )}
-          {item.text && (
-            <Text
-              className={clsx(
-                !isMe ? "text-black" : "text-gray-200",
-                `text-md max-w-[85%]`,
-              )}
-            >
-              {item.text}
-            </Text>
-          )}
+          <Text
+            className={clsx(
+              !isMe ? "text-black" : "text-gray-200",
+              `text-md max-w-[85%]`,
+            )}
+          >
+            {item.text}
+          </Text>
           <Text
             className={clsx(
               "text-[10px] text-right ml-2",
@@ -192,17 +147,6 @@ export default function Conversation() {
         className="p-3 bg-white border-t border-gray-300"
       >
         <SafeAreaView className="flex-row items-center gap-2">
-          <TouchableOpacity
-            onPress={handleImageUpload}
-            disabled={isUploading}
-            className="h-10 w-10 items-center justify-center"
-          >
-            {isUploading ? (
-              <ActivityIndicator size="small" color="#0000ff" />
-            ) : (
-              <Text className="text-2xl">🖼️</Text>
-            )}
-          </TouchableOpacity>
           <TextInput
             className="flex-1 rounded-full h-10 px-4 bg-gray-100 border border-gray-300 focus:border-blue-500 focus:bg-white"
             value={message}

examples/chat-rn-clerk/app/chat/index.tsx

@@ -11,7 +11,7 @@ import React, {
 } from "react-native";
 
 import { useUser } from "@clerk/clerk-expo";
-import { useAccount } from "jazz-react-native";
+import { useAccount } from "../../src/jazz";
 import { Chat } from "../../src/schema";
 
 export default function ChatScreen() {

examples/chat-rn-clerk/babel.config.js

@@ -1,9 +1,7 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: [
-      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
-      "nativewind/babel",
-    ],
+    presets: ["babel-preset-expo"],
+    plugins: ["nativewind/babel"],
   };
 };

examples/chat-rn-clerk/global.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

examples/chat-rn-clerk/metro.config.js

@@ -1,6 +1,5 @@
 // Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require("expo/metro-config");
-const { withNativeWind } = require("nativewind/metro");
 const { FileStore } = require("metro-cache");
 const path = require("path");
 
@@ -32,5 +31,4 @@ config.cacheStores = [
   }),
 ];
 
-// module.exports = config;
-module.exports = withNativeWind(config, { input: "./global.css" });
+module.exports = config;

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.58",
+  "version": "1.0.31",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -20,7 +20,6 @@
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.2.21",
     "@expo/vector-icons": "^14.0.2",
-    "@op-engineering/op-sqlite": "^11.2.12",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-navigation/native": "^7.0.13",
     "@react-navigation/native-stack": "^7.1.14",
@@ -35,7 +34,6 @@
     "expo-dev-client": "~5.0.5",
     "expo-file-system": "^18.0.4",
     "expo-font": "~13.0.1",
-    "expo-image-picker": "~16.0.4",
     "expo-linking": "~7.0.3",
     "expo-router": "~4.0.11",
     "expo-secure-store": "~14.0.0",
@@ -47,9 +45,9 @@
     "jazz-react-native-auth-clerk": "workspace:*",
     "jazz-react-native-media-images": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^4.1.21",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "nativewind": "^2.0.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
     "react-native-gesture-handler": "~2.20.2",
@@ -72,8 +70,8 @@
     "jest": "^29.2.1",
     "jest-expo": "~52.0.2",
     "react-test-renderer": "18.2.0",
-    "tailwindcss": "^3.4.15",
-    "typescript": "~5.6.2"
+    "tailwindcss": "3.3.2",
+    "typescript": "^5.3.3"
   },
   "private": true
 }

examples/chat-rn-clerk/src/auth-context.tsx

@@ -1,8 +1,15 @@
 import { useClerk, useUser } from "@clerk/clerk-expo";
-import { JazzProvider, setupKvStore } from "jazz-react-native";
 import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
-import React, { createContext, PropsWithChildren, useContext } from "react";
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { Text, View } from "react-native";
+import { Jazz, kvStore } from "./jazz";
+
 const AuthContext = createContext<{
   isAuthenticated: boolean;
   isLoading: boolean;
@@ -15,13 +22,19 @@ export function useAuth() {
   return useContext(AuthContext);
 }
 
-const kvStore = setupKvStore();
-
 export function JazzAndAuth({ children }: PropsWithChildren) {
   const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
   const clerk = useClerk();
   const [auth, state] = useJazzClerkAuth(clerk, kvStore);
-  const isAuthenticated = Boolean(isSignedIn && isClerkLoaded && auth);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  useEffect(() => {
+    if (isSignedIn && isClerkLoaded && auth) {
+      setIsAuthenticated(true);
+    } else {
+      setIsAuthenticated(false);
+    }
+  }, [isSignedIn, isClerkLoaded, auth]);
 
   return (
     <AuthContext.Provider
@@ -34,13 +47,13 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
           </View>
         ))}
       {auth && clerk.user ? (
-        <JazzProvider
+        <Jazz.Provider
           auth={auth}
-          storage="sqlite"
           peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
+          storage={undefined}
         >
           {children}
-        </JazzProvider>
+        </Jazz.Provider>
       ) : (
         children
       )}

examples/chat-rn-clerk/src/jazz.tsx

@@ -0,0 +1,4 @@
+import { createJazzRNApp } from "jazz-react-native";
+
+export const Jazz = createJazzRNApp();
+export const { useAccount, useCoState, useAcceptInvite, kvStore } = Jazz;

examples/chat-rn-clerk/src/schema.ts

@@ -1,8 +1,7 @@
-import { CoList, CoMap, ImageDefinition, co } from "jazz-tools";
+import { CoList, CoMap, co } from "jazz-tools";
 
 export class Message extends CoMap {
   text = co.string;
-  image = co.optional.ref(ImageDefinition);
 }
 
 export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat-rn-clerk/tailwind.config.js

@@ -1,14 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  // NOTE: Update this to include the paths to all of your component files.
-  content: [
-    "./app/**/*.{js,jsx,ts,tsx}",
-    "./components/**/*.{js,jsx,ts,tsx}",
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
-  presets: [require("nativewind/preset")],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

examples/chat-rn-clerk/tailwind.config.ts

@@ -0,0 +1,15 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./app/**/*.{js,jsx,ts,tsx}",
+    "./components/**/*.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;

examples/chat-rn-clerk/tsconfig.json

@@ -7,5 +7,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", "nativewind-env.d.ts"]
+  "include": ["**/*.ts", "**/*.tsx"]
 }

examples/chat-rn/CHANGELOG.md

@@ -1,207 +1,5 @@
 # chat-rn
 
-## 1.0.55
-
-### Patch Changes
-
-- Updated dependencies [c2ca1fe]
-- Updated dependencies [1227047]
-  - jazz-tools@0.9.17
-  - jazz-react-native@0.9.17
-
-## 1.0.54
-
-### Patch Changes
-
-- Updated dependencies [24b3b6a]
-  - jazz-tools@0.9.16
-  - jazz-react-native@0.9.16
-
-## 1.0.53
-
-### Patch Changes
-
-- Updated dependencies [7491711]
-  - jazz-tools@0.9.15
-  - jazz-react-native@0.9.15
-
-## 1.0.52
-
-### Patch Changes
-
-- Updated dependencies [3df93cc]
-  - jazz-tools@0.9.14
-  - jazz-react-native@0.9.14
-
-## 1.0.51
-
-### Patch Changes
-
-- jazz-react-native@0.9.13
-- jazz-tools@0.9.13
-
-## 1.0.50
-
-### Patch Changes
-
-- jazz-react-native@0.9.12
-- jazz-tools@0.9.12
-
-## 1.0.49
-
-### Patch Changes
-
-- jazz-react-native@0.9.11
-- jazz-tools@0.9.11
-
-## 1.0.48
-
-### Patch Changes
-
-- Updated dependencies [f76274c]
-- Updated dependencies [5e83864]
-  - jazz-react-native@0.9.10
-  - jazz-tools@0.9.10
-
-## 1.0.47
-
-### Patch Changes
-
-- Updated dependencies [8eb9247]
-  - jazz-tools@0.9.9
-  - jazz-react-native@0.9.9
-
-## 1.0.46
-
-### Patch Changes
-
-- Updated dependencies [d1d773b]
-  - jazz-tools@0.9.8
-  - jazz-react-native@0.9.8
-
-## 1.0.45
-
-### Patch Changes
-
-- Updated dependencies [8a390d2]
-  - jazz-react-native@0.9.6
-
-## 1.0.44
-
-### Patch Changes
-
-- Updated dependencies [c871912]
-  - jazz-react-native@0.9.5
-
-## 1.0.43
-
-### Patch Changes
-
-- jazz-react-native@0.9.4
-
-## 1.0.42
-
-### Patch Changes
-
-- Updated dependencies [7cd691f]
-  - jazz-react-native@0.9.3
-
-## 1.0.41
-
-### Patch Changes
-
-- Updated dependencies [80fd3e9]
-  - jazz-react-native@0.9.2
-
-## 1.0.40
-
-### Patch Changes
-
-- Updated dependencies [1b71969]
-  - jazz-tools@0.9.1
-  - jazz-react-native@0.9.1
-
-## 1.0.39
-
-### Patch Changes
-
-- Updated dependencies [1da4d55]
-- Updated dependencies [8eda792]
-- Updated dependencies [1e5e3a1]
-  - jazz-react-native@0.9.0
-  - jazz-tools@0.9.0
-
-## 1.0.38
-
-### Patch Changes
-
-- Updated dependencies [dc62b95]
-- Updated dependencies [1de26f8]
-  - jazz-tools@0.8.51
-  - jazz-react-native@0.8.51
-
-## 1.0.37
-
-### Patch Changes
-
-- jazz-react-native@0.8.50
-- jazz-tools@0.8.50
-
-## 1.0.36
-
-### Patch Changes
-
-- jazz-react-native@0.8.49
-- jazz-tools@0.8.49
-
-## 1.0.35
-
-### Patch Changes
-
-- Updated dependencies [635e824]
-- Updated dependencies [0a85982]
-  - jazz-tools@0.8.48
-  - jazz-react-native@0.8.48
-
-## 1.0.34
-
-### Patch Changes
-
-- Updated dependencies [33ef9c4]
-  - jazz-react-native@0.8.47
-
-## 1.0.33
-
-### Patch Changes
-
-- Updated dependencies [ab4ffbd]
-  - jazz-react-native@0.8.46
-
-## 1.0.32
-
-### Patch Changes
-
-- Updated dependencies [7701307]
-- Updated dependencies [fa41f8e]
-- Updated dependencies [88d7d9a]
-- Updated dependencies [60e35ea]
-  - jazz-react-native@0.8.45
-  - jazz-tools@0.8.45
-
-## 1.0.31
-
-### Patch Changes
-
-- jazz-react-native@0.8.44
-- jazz-tools@0.8.44
-
-## 1.0.30
-
-### Patch Changes
-
-- jazz-react-native@0.8.41
-- jazz-tools@0.8.41
-
 ## 1.0.29
 
 ### Patch Changes

examples/chat-rn/babel.config.js

@@ -1,9 +1,7 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: [
-      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
-      "nativewind/babel",
-    ],
+    presets: ["babel-preset-expo"],
+    plugins: ["nativewind/babel"],
   };
 };

examples/chat-rn/global.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

examples/chat-rn/metro.config.js

@@ -1,6 +1,5 @@
 // Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require("expo/metro-config");
-const { withNativeWind } = require("nativewind/metro");
 const { FileStore } = require("metro-cache");
 const path = require("path");
 
@@ -8,7 +7,7 @@ const path = require("path");
 const projectRoot = __dirname;
 const workspaceRoot = path.resolve(projectRoot, "../..");
 
-const config = getDefaultConfig(projectRoot, { isCSSEnabled: true });
+const config = getDefaultConfig(projectRoot);
 
 // Since we are using pnpm, we have to setup the monorepo manually for Metro
 // #1 - Watch all files in the monorepo
@@ -20,10 +19,7 @@ config.resolver.nodeModulesPaths = [
 ];
 config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
 config.resolver.unstable_enablePackageExports = true;
-config.resolver.requireCycleIgnorePatterns = [
-  /(^|\/|\\)node_modules($|\/|\\)/,
-  /(^|\/|\\)packages($|\/|\\)/,
-];
+config.resolver.requireCycleIgnorePatterns = [/(^|\/|\\)node_modules($|\/|\\)/];
 
 // Use turborepo to restore the cache when possible
 config.cacheStores = [
@@ -32,5 +28,4 @@ config.cacheStores = [
   }),
 ];
 
-// module.exports = config;
-module.exports = withNativeWind(config, { input: "./global.css" });
+module.exports = config;

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.55",
+  "version": "1.0.29",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -13,10 +13,9 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
-    "@op-engineering/op-sqlite": "^11.2.12",
     "@react-native-community/netinfo": "^11.4.1",
-    "@react-navigation/native": "^7.0.13",
-    "@react-navigation/native-stack": "^7.1.14",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native-stack": "^6.11.0",
     "base-64": "^1.0.0",
     "clsx": "^2.0.0",
     "expo": "^52.0.0",
@@ -31,8 +30,8 @@
     "expo-web-browser": "~14.0.1",
     "jazz-react-native": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^4.1.21",
-    "react": "^18.3.1",
+    "nativewind": "^2.0.11",
+    "react": "18.2.0",
     "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
     "react-native-get-random-values": "^1.11.0",
@@ -46,8 +45,8 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/react": "^18.3.12",
-    "tailwindcss": "^3.4.15",
-    "typescript": "~5.6.2"
+    "tailwindcss": "3.3.2",
+    "typescript": "^5.3.3"
   },
   "private": true
 }

examples/chat-rn/src/App.tsx

@@ -1,5 +1,3 @@
-import "../global.css";
-
 import {
   NavigationContainer,
   useNavigationContainerRef,
@@ -9,8 +7,9 @@ import * as Linking from "expo-linking";
 import React, { StrictMode, useEffect, useState } from "react";
 import HandleInviteScreen from "./invite";
 
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react-native";
+import { DemoAuthBasicUI, useDemoAuth } from "jazz-react-native";
 import ChatScreen from "./chat";
+import { Jazz } from "./jazz";
 
 const Stack = createNativeStackNavigator();
 
@@ -33,6 +32,7 @@ function App() {
     "ChatScreen" | "HandleInviteScreen"
   >("ChatScreen");
   const navigationRef = useNavigationContainerRef();
+
   useEffect(() => {
     Linking.getInitialURL().then((url) => {
       if (url) {
@@ -49,10 +49,10 @@ function App() {
 
   return (
     <StrictMode>
-      <JazzProvider
+      <Jazz.Provider
         auth={auth}
-        storage="sqlite"
         peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
+        storage={undefined}
       >
         <NavigationContainer linking={linking} ref={navigationRef}>
           <Stack.Navigator initialRouteName={initialRoute}>
@@ -68,7 +68,7 @@ function App() {
             />
           </Stack.Navigator>
         </NavigationContainer>
-      </JazzProvider>
+      </Jazz.Provider>
       {state.state !== "signedIn" ? (
         <DemoAuthBasicUI appName="Jazz Chat" state={state} />
       ) : null}

examples/chat-rn/src/chat.tsx

@@ -14,40 +14,50 @@ import React, {
   Alert,
 } from "react-native";
 
-import { useAccount, useCoState } from "jazz-react-native";
+import { useAccount, useCoState } from "./jazz";
 import { Chat, Message } from "./schema";
 
 export default function ChatScreen({ navigation }: { navigation: any }) {
   const { me, logOut } = useAccount();
-  const [chatId, setChatId] = useState<ID<Chat>>();
-  const loadedChat = useCoState(Chat, chatId, [{}]);
+  const [chat, setChat] = useState<Chat>();
   const [message, setMessage] = useState("");
+  const loadedChat = useCoState(Chat, chat?.id, [{}]);
 
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => <Button onPress={logOut} title="Logout" />,
       headerLeft: () =>
-        loadedChat ? (
+        chat ? (
           <Button
             onPress={() => {
-              if (loadedChat?.id) {
+              if (chat?.id) {
                 Clipboard.setStringAsync(
-                  `https://chat.jazz.tools/#/chat/${loadedChat.id}`,
+                  `https://chat.jazz.tools/#/chat/${chat.id}`,
                 );
-                Alert.alert("Copied to clipboard", `Chat ID: ${loadedChat.id}`);
+                Alert.alert("Copied to clipboard", `Chat ID: ${chat.id}`);
               }
             }}
             title="Share"
           />
         ) : null,
     });
-  }, [navigation, loadedChat]);
+  }, [navigation, chat]);
 
   const createChat = () => {
     const group = Group.create({ owner: me });
     group.addMember("everyone", "writer");
     const chat = Chat.create([], { owner: group });
-    setChatId(chat.id);
+    setChat(chat);
+  };
+
+  const loadChat = async (chatId: ID<Chat>) => {
+    try {
+      const chat = await Chat.load(chatId, me, []);
+      setChat(chat);
+    } catch (error) {
+      console.log("Error loading chat", error);
+      Alert.alert("Error", `Error loading chat: ${error}`);
+    }
   };
 
   const joinChat = () => {
@@ -63,7 +73,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
           text: "Join",
           onPress: (chatId) => {
             if (chatId) {
-              setChatId(chatId as ID<Chat>);
+              loadChat(chatId as ID<Chat>);
             } else {
               Alert.alert("Error", "Chat ID cannot be empty.");
             }
@@ -75,11 +85,9 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
   };
 
   const sendMessage = () => {
-    if (!loadedChat) return;
+    if (!chat) return;
     if (message.trim()) {
-      loadedChat.push(
-        Message.create({ text: message }, { owner: loadedChat?._owner }),
-      );
+      chat.push(Message.create({ text: message }, { owner: chat._owner }));
       setMessage("");
     }
   };
@@ -129,7 +137,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
 
   return (
     <View className="flex flex-col h-full">
-      {!loadedChat ? (
+      {!chat ? (
         <View className="flex flex-col h-full items-center justify-center">
           <TouchableOpacity
             onPress={createChat}

examples/chat-rn/src/invite.tsx

@@ -1,7 +1,13 @@
-import { useAcceptInvite } from "jazz-react-native";
 import React, { Text } from "react-native";
+import { useAcceptInvite } from "./jazz";
 import { Chat } from "./schema";
 
+type ChatScreenParams = {
+  valueHint?: string;
+  valueID?: string;
+  inviteSecret?: string;
+};
+
 export default function HandleInviteScreen({
   navigation,
 }: {

examples/chat-rn/src/jazz.tsx

@@ -0,0 +1,4 @@
+import { createJazzRNApp } from "jazz-react-native";
+
+export const Jazz = createJazzRNApp();
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;

examples/chat-rn/tailwind.config.js

@@ -1,14 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  // NOTE: Update this to include the paths to all of your component files.
-  content: [
-    "./app/**/*.{js,jsx,ts,tsx}",
-    "./components/**/*.{js,jsx,ts,tsx}",
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
-  presets: [require("nativewind/preset")],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

examples/chat-vue/CHANGELOG.md

@@ -1,185 +1,5 @@
 # chat-vue
 
-## 0.0.42
-
-### Patch Changes
-
-- Updated dependencies [c2ca1fe]
-- Updated dependencies [1227047]
-  - jazz-tools@0.9.17
-  - jazz-browser@0.9.17
-  - jazz-vue@0.9.17
-
-## 0.0.41
-
-### Patch Changes
-
-- Updated dependencies [24b3b6a]
-  - jazz-tools@0.9.16
-  - jazz-browser@0.9.16
-  - jazz-vue@0.9.16
-
-## 0.0.40
-
-### Patch Changes
-
-- Updated dependencies [7491711]
-  - jazz-tools@0.9.15
-  - jazz-browser@0.9.15
-  - jazz-vue@0.9.15
-
-## 0.0.39
-
-### Patch Changes
-
-- Updated dependencies [3df93cc]
-  - jazz-tools@0.9.14
-  - jazz-browser@0.9.14
-  - jazz-vue@0.9.14
-
-## 0.0.38
-
-### Patch Changes
-
-- jazz-browser@0.9.13
-- jazz-tools@0.9.13
-- jazz-vue@0.9.13
-
-## 0.0.37
-
-### Patch Changes
-
-- jazz-browser@0.9.12
-- jazz-tools@0.9.12
-- jazz-vue@0.9.12
-
-## 0.0.36
-
-### Patch Changes
-
-- jazz-browser@0.9.11
-- jazz-tools@0.9.11
-- jazz-vue@0.9.11
-
-## 0.0.35
-
-### Patch Changes
-
-- Updated dependencies [5e83864]
-  - jazz-tools@0.9.10
-  - jazz-browser@0.9.10
-  - jazz-vue@0.9.10
-
-## 0.0.34
-
-### Patch Changes
-
-- Updated dependencies [8eb9247]
-  - jazz-tools@0.9.9
-  - jazz-browser@0.9.9
-  - jazz-vue@0.9.9
-
-## 0.0.33
-
-### Patch Changes
-
-- Updated dependencies [d1d773b]
-  - jazz-tools@0.9.8
-  - jazz-browser@0.9.8
-  - jazz-vue@0.9.8
-
-## 0.0.32
-
-### Patch Changes
-
-- Updated dependencies [1b71969]
-- Updated dependencies [5d98189]
-  - jazz-browser@0.9.1
-  - jazz-tools@0.9.1
-  - jazz-vue@0.9.1
-
-## 0.0.31
-
-### Patch Changes
-
-- Updated dependencies [9dd8d95]
-- Updated dependencies [8eda792]
-  - jazz-vue@0.9.0
-  - jazz-tools@0.9.0
-  - jazz-browser@0.9.0
-
-## 0.0.30
-
-### Patch Changes
-
-- Updated dependencies [dc62b95]
-- Updated dependencies [1de26f8]
-  - jazz-tools@0.8.51
-  - jazz-browser@0.8.51
-  - jazz-vue@0.8.51
-
-## 0.0.29
-
-### Patch Changes
-
-- jazz-browser@0.8.50
-- jazz-tools@0.8.50
-- jazz-vue@0.8.50
-
-## 0.0.28
-
-### Patch Changes
-
-- jazz-browser@0.8.49
-- jazz-tools@0.8.49
-- jazz-vue@0.8.49
-
-## 0.0.27
-
-### Patch Changes
-
-- Updated dependencies [635e824]
-- Updated dependencies [0a85982]
-  - jazz-tools@0.8.48
-  - jazz-browser@0.8.48
-  - jazz-vue@0.8.48
-
-## 0.0.26
-
-### Patch Changes
-
-- Updated dependencies [6f0bd7f]
-- Updated dependencies [fa41f8e]
-- Updated dependencies [88d7d9a]
-- Updated dependencies [60e35ea]
-  - jazz-browser@0.8.45
-  - jazz-tools@0.8.45
-  - jazz-vue@0.8.45
-
-## 0.0.25
-
-### Patch Changes
-
-- jazz-browser@0.8.44
-- jazz-tools@0.8.44
-- jazz-vue@0.8.44
-
-## 0.0.24
-
-### Patch Changes
-
-- Updated dependencies [ac216b9]
-  - jazz-browser@0.8.41
-  - jazz-tools@0.8.41
-  - jazz-vue@0.8.41
-
-## 0.0.23
-
-### Patch Changes
-
-- jazz-browser@0.8.40
-- jazz-vue@0.8.40
-
 ## 0.0.22
 
 ### Patch Changes

examples/chat-vue/README.md

@@ -1,59 +1,29 @@
 # Chat example with Jazz and Vue
 
-## Getting started
+## Installing & running the example locally
 
-You can either
-1. Clone the jazz repository, and run the app within the monorepo.
-2. Or create a new Jazz project using this example as a template.
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
-
-### Using the example as a template
-
-Create a new Jazz project, and use this example as a template.
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
 ```bash
-npm create jazz-app@latest --example chat-vue --project-name chat-vue
-```
-or
-```bash
-npx create-jazz-app@latest --example chat-vue --project-name chat-vue
+npx degit gardencmp/jazz jazz
 ```
 
-Go to the new project directory.
+Go to the todo-vue example directory:
 ```bash
-cd chat-vue
+cd jazz/examples/chat-vue
 ```
 
-Run the dev server.
-```bash
-npm run dev
-```
-
-### Using the monorepo
-
-This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
-
-Clone the jazz repository.
-```bash
-git clone https://github.com/garden-co/jazz.git
-```
-
-Install and build dependencies.
+Install and build dependencies:
 ```bash
 pnpm i && npx turbo build
 ```
 
-Go to the example directory.
-```bash
-cd jazz/examples/chat-vue/
-```
-
-Start the dev server.
+Start the dev server:
 ```bash
 pnpm dev
 ```
 
-Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
-
 ## 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.

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.42",
+  "version": "0.0.22",
   "private": true,
   "type": "module",
   "scripts": {
@@ -25,14 +25,14 @@
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.7.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.46.0",
     "eslint-plugin-vue": "^9.28.0",
     "npm-run-all2": "^6.2.3",
     "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.15",
-    "typescript": "~5.6.2",
-    "vite": "^5.4.10",
+    "tailwindcss": "3.3.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
     "vite-plugin-vue-devtools": "^7.4.6",
     "vue-tsc": "^2.1.6"
   }

examples/chat-vue/src/App.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script setup lang="ts">
-import { useAccount } from "jazz-vue";
 import AppContainer from "./components/AppContainer.vue";
 import TopBar from "./components/TopBar.vue";
+import { useAccount } from "./main";
 
 const { me, logOut } = useAccount();
 </script>

examples/chat-vue/src/main.ts

@@ -1,9 +1,13 @@
-import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-vue";
+import { DemoAuthBasicUI, createJazzVueApp, useDemoAuth } from "jazz-vue";
 import { createApp, defineComponent, h } from "vue";
 import App from "./App.vue";
 import "./index.css";
 import router from "./router";
 
+const Jazz = createJazzVueApp();
+export const { useAccount, useCoState } = Jazz;
+const { JazzProvider } = Jazz;
+
 const RootComponent = defineComponent({
   name: "RootComponent",
   setup() {

examples/chat-vue/src/views/ChatView.vue

@@ -26,12 +26,12 @@
 
 <script lang="ts">
 import type { ID } from "jazz-tools";
-import { useCoState } from "jazz-vue";
 import { type PropType, computed, defineComponent, ref } from "vue";
 import ChatBody from "../components/ChatBody.vue";
 import ChatBubble from "../components/ChatBubble.vue";
 import ChatInput from "../components/ChatInput.vue";
 import EmptyChatMessage from "../components/EmptyChatMessage.vue";
+import { useCoState } from "../main";
 import { Chat, Message } from "../schema";
 
 export default defineComponent({

examples/chat-vue/src/views/HomeView.vue

@@ -4,8 +4,8 @@
   
   <script setup lang="ts">
 import { Group } from "jazz-tools";
-import { useAccount } from "jazz-vue";
 import { useRouter } from "vue-router";
+import { useAccount } from "../main";
 import { Chat } from "../schema";
 
 const router = useRouter();

examples/chat/CHANGELOG.md

@@ -1,198 +1,5 @@
 # jazz-example-chat
 
-## 0.0.138
-
-### Patch Changes
-
-- Updated dependencies [c2ca1fe]
-- Updated dependencies [1227047]
-  - jazz-tools@0.9.17
-  - jazz-browser-media-images@0.9.17
-  - jazz-react@0.9.17
-
-## 0.0.137
-
-### Patch Changes
-
-- Updated dependencies [24b3b6a]
-  - jazz-tools@0.9.16
-  - jazz-browser-media-images@0.9.16
-  - jazz-react@0.9.16
-
-## 0.0.136
-
-### Patch Changes
-
-- Updated dependencies [7491711]
-  - jazz-tools@0.9.15
-  - jazz-browser-media-images@0.9.15
-  - jazz-react@0.9.15
-
-## 0.0.135
-
-### Patch Changes
-
-- Updated dependencies [3df93cc]
-  - jazz-tools@0.9.14
-  - jazz-browser-media-images@0.9.14
-  - jazz-react@0.9.14
-
-## 0.0.134
-
-### Patch Changes
-
-- jazz-react@0.9.13
-- jazz-tools@0.9.13
-- jazz-browser-media-images@0.9.13
-
-## 0.0.133
-
-### Patch Changes
-
-- jazz-react@0.9.12
-- jazz-tools@0.9.12
-- jazz-browser-media-images@0.9.12
-
-## 0.0.132
-
-### Patch Changes
-
-- jazz-react@0.9.11
-- jazz-tools@0.9.11
-- jazz-browser-media-images@0.9.11
-
-## 0.0.131
-
-### Patch Changes
-
-- f76274c: Fix image handling in react-native
-- Updated dependencies [5e83864]
-  - jazz-react@0.9.10
-  - jazz-tools@0.9.10
-  - jazz-browser-media-images@0.9.10
-
-## 0.0.130
-
-### Patch Changes
-
-- Updated dependencies [8eb9247]
-  - jazz-tools@0.9.9
-  - jazz-browser-media-images@0.9.9
-  - jazz-react@0.9.9
-
-## 0.0.129
-
-### Patch Changes
-
-- Updated dependencies [d1d773b]
-  - jazz-tools@0.9.8
-  - jazz-react@0.9.8
-  - jazz-browser-media-images@0.9.8
-
-## 0.0.128
-
-### Patch Changes
-
-- jazz-react@0.9.4
-
-## 0.0.127
-
-### Patch Changes
-
-- Updated dependencies [1b71969]
-  - jazz-react@0.9.1
-  - jazz-tools@0.9.1
-  - jazz-browser-media-images@0.9.1
-
-## 0.0.126
-
-### Patch Changes
-
-- Updated dependencies [956a4d1]
-- Updated dependencies [8eda792]
-  - jazz-react@0.9.0
-  - jazz-tools@0.9.0
-  - jazz-browser-media-images@0.9.0
-
-## 0.0.125
-
-### Patch Changes
-
-- Updated dependencies [dc62b95]
-- Updated dependencies [1de26f8]
-  - jazz-tools@0.8.51
-  - jazz-browser-media-images@0.8.51
-  - jazz-react@0.8.51
-
-## 0.0.124
-
-### Patch Changes
-
-- jazz-react@0.8.50
-- jazz-tools@0.8.50
-- jazz-browser-media-images@0.8.50
-
-## 0.0.123
-
-### Patch Changes
-
-- jazz-react@0.8.49
-- jazz-tools@0.8.49
-- jazz-browser-media-images@0.8.49
-
-## 0.0.122
-
-### Patch Changes
-
-- Updated dependencies [635e824]
-- Updated dependencies [0a85982]
-  - jazz-tools@0.8.48
-  - jazz-browser-media-images@0.8.48
-  - jazz-react@0.8.48
-
-## 0.0.121
-
-### Patch Changes
-
-- Updated dependencies [6f0bd7f]
-- Updated dependencies [fca6a0b]
-- Updated dependencies [fa41f8e]
-- Updated dependencies [88d7d9a]
-- Updated dependencies [60e35ea]
-  - cojson@0.8.45
-  - jazz-tools@0.8.45
-  - jazz-react@0.8.45
-  - jazz-browser-media-images@0.8.45
-
-## 0.0.120
-
-### Patch Changes
-
-- Updated dependencies [5d20c81]
-  - cojson@0.8.44
-  - jazz-react@0.8.44
-  - jazz-tools@0.8.44
-  - jazz-browser-media-images@0.8.44
-
-## 0.0.119
-
-### Patch Changes
-
-- Updated dependencies [3252502]
-- Updated dependencies [6370348]
-- Updated dependencies [ac216b9]
-  - cojson@0.8.41
-  - jazz-react@0.8.41
-  - jazz-tools@0.8.41
-  - jazz-browser-media-images@0.8.41
-
-## 0.0.118
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.40
-- jazz-react@0.8.40
-
 ## 0.0.117
 
 ### Patch Changes