Add chat clerk example to docs

fix: add react to the pnpm overrides because some examples are experiencing version mismatch

.changeset/config.json

@@ -12,6 +12,7 @@
             "jazz-browser-auth-clerk",
             "jazz-react-auth-clerk",
             "jazz-react",
+            "jazz-react-native",
             "jazz-nodejs",
             "jazz-run",
             "cojson-transport-ws",

.github/workflows/playwright.yml

@@ -10,9 +10,10 @@ jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    continue-on-error: true
     strategy:
       matrix:
-        project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/pets"]
+        project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/chat", "examples/pets"]
 
     steps:
       - uses: actions/checkout@v3
@@ -45,8 +46,12 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Pnpm Build
-        run: pnpm turbo build;
+        run: pnpm turbo build
         working-directory: ./${{ matrix.project }}
+      
+      - name: Build jazz-run
+        run: pnpm exec turbo build && chmod +x dist/index.js;
+        working-directory: ./packages/jazz-run
 
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps

.github/workflows/unit-test.yml

@@ -41,7 +41,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Pnpm Build
-        run: pnpm turbo build;
+        run: pnpm turbo build
 
       - name: Unit Tests
         run: pnpm test

.npmrc

@@ -0,0 +1 @@
+node-linker=hoisted

.prettierrc.js

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

e2e/BinaryCoStream/CHANGELOG.md

@@ -1,17 +1,43 @@
 # @jazz-e2e/binarycostream
 
+## 0.0.86
+
+### Patch Changes
+
+-   Updated dependencies [c3f4e6b]
+-   Updated dependencies [d9152ed]
+    -   jazz-tools@0.8.5
+    -   cojson@0.8.5
+    -   jazz-react@0.8.5
+
+## 0.0.85
+
+### Patch Changes
+
+-   Updated dependencies
+    -   hash-slash@0.2.1
+
+## 0.0.84
+
+### Patch Changes
+
+-   Updated dependencies
+    -   cojson@0.8.3
+    -   jazz-react@0.8.3
+    -   jazz-tools@0.8.3
+
 ## 0.0.83
 
 ### Patch Changes
 
-- Updated dependencies [a075f90]
-  - jazz-tools@0.8.2
-  - jazz-react@0.8.2
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-react@0.8.2
 
 ## 0.0.82
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-tools@0.8.1
-  - jazz-react@0.8.1
+-   Updated dependencies
+    -   jazz-tools@0.8.1
+    -   jazz-react@0.8.1

e2e/BinaryCoStream/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jazz-e2e/binarycostream",
   "private": true,
-  "version": "0.0.83",
+  "version": "0.0.86",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,11 +14,11 @@
     "*.{js,jsx,mdx,json}": "prettier --write"
   },
   "dependencies": {
-    "cojson": "workspace:0.8.0",
-    "hash-slash": "workspace:0.2.0",
+    "cojson": "workspace:0.8.5",
+    "hash-slash": "workspace:0.2.1",
     "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.2",
-    "jazz-tools": "workspace:0.8.2",
+    "jazz-react": "workspace:0.8.5",
+    "jazz-tools": "workspace:0.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

e2e/CoValues/CHANGELOG.md

@@ -1,9 +1,35 @@
 # @jazz-e2e/covalues
 
+## 0.0.85
+
+### Patch Changes
+
+-   Updated dependencies [c3f4e6b]
+-   Updated dependencies [d9152ed]
+    -   jazz-tools@0.8.5
+    -   cojson@0.8.5
+    -   jazz-react@0.8.5
+
+## 0.0.84
+
+### Patch Changes
+
+-   Updated dependencies
+    -   hash-slash@0.2.1
+
+## 0.0.83
+
+### Patch Changes
+
+-   Updated dependencies
+    -   cojson@0.8.3
+    -   jazz-react@0.8.3
+    -   jazz-tools@0.8.3
+
 ## 0.0.82
 
 ### Patch Changes
 
-- Updated dependencies [a075f90]
-  - jazz-tools@0.8.2
-  - jazz-react@0.8.2
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-react@0.8.2

e2e/CoValues/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jazz-e2e/covalues",
   "private": true,
-  "version": "0.0.82",
+  "version": "0.0.85",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/book-shelf/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error"]
+  }
+}

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/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

examples/book-shelf/CHANGELOG.md

@@ -0,0 +1,11 @@
+# jazz-example-book-shelf
+
+## 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/gardencmp/jazz"
+
+COPY ./dist /usr/share/caddy/

examples/book-shelf/README.md

@@ -0,0 +1,41 @@
+# Jazz Book Shelf Example
+
+## Installing & running the example locally
+
+(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+
+Start by checking out `jazz`
+
+Install dependencies:
+
+```bash
+pnpm install
+```
+
+Go to the `examples/book-shelf` directory.
+
+```bash
+cd examples/book-shelf
+```
+
+Install dependencies:
+
+```bash
+pnpm install
+```
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx 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/2_main.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     = "mesh"
+    }
+
+    spread {
+      attribute = "${node.datacenter}"
+      weight    = 100
+    }
+
+    constraint {
+      distinct_hosts = true
+    }
+
+    task "server" {
+      driver = "docker"
+
+      config {
+        image = "$DOCKER_TAG"
+        ports = ["http"]
+
+        auth = {
+          username = "$DOCKER_USER"
+          password = "$DOCKER_PASSWORD"
+        }
+      }
+
+      service {
+        tags = ["public"]
+        name = "example-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,35 @@
+{
+  "name": "jazz-example-book-shelf",
+  "version": "0.1.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "clsx": "^2.0.0",
+    "jazz-browser-media-images": "workspace:0.8.5",
+    "jazz-react": "workspace:0.8.5",
+    "jazz-tools": "workspace:0.8.5",
+    "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",
+    "eslint": "^8.46.0",
+    "eslint-config-next": "14.2.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "postcss": "^8.4.27",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "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,136 @@
+"use client";
+
+import { ChangeEvent, useState } from "react";
+import { BookReview, ListOfBookReviews } from "@/schema";
+import { useAccount } from "@/components/JazzAndAuth";
+import { useRouter } from "next/navigation";
+import RatingInput from "@/components/RatingInput";
+import { createImage } from "jazz-browser-media-images";
+import { Group, ImageDefinition } from "jazz-tools";
+import { Container } from "@/components/Container";
+import { Button } from "@/components/Button";
+
+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 { useCoState } from "@/components/JazzAndAuth";
+import { BookReview } from "@/schema";
+import { Group, ID } from "jazz-tools";
+import { BookCover } from "@/components/BookCover";
+import clsx from "clsx";
+import RatingInput from "@/components/RatingInput";
+import Rating from "@/components/Rating";
+import { Container } from "@/components/Container";
+
+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 { Fraunces } from "next/font/google";
+import clsx from "clsx";
+
+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 { useAccount } from "@/components/JazzAndAuth";
+import UserProfile from "@/components/UserProfile";
+import { JazzAccount } from "@/schema";
+import { ID } from "jazz-tools";
+import { Container } from "@/components/Container";
+
+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={`http://localhost:3000/user/${me?.id}`}
+          readOnly
+        />
+      </label>
+    </Container>
+  );
+}

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

@@ -0,0 +1,14 @@
+import UserProfile from "@/components/UserProfile";
+import { JazzAccount } from "@/schema";
+import { ID } from "jazz-tools";
+import { Container } from "@/components/Container";
+
+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 { ProgressiveImg } from "jazz-react";
+import { BookReview } from "@/schema";
+import { ChangeEvent, useRef, useState } from "react";
+import { Group, ImageDefinition } from "jazz-tools";
+import { createImage } from "jazz-browser-media-images";
+import { useAccount } from "@/components/JazzAndAuth";
+import clsx from "clsx";
+import PlusIcon from "@/components/icons/PlusIcon";
+import { Button } from "@/components/Button";
+
+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 { BookReview } from "@/schema";
+import Rating from "@/components/Rating";
+import { Group } from "jazz-tools";
+import RatingInput from "@/components/RatingInput";
+import { BookCover } from "@/components/BookCover";
+
+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 { BookReview } from "../schema";
+import { ID } from "jazz-tools";
+import { useCoState } from "@/components/JazzAndAuth";
+import Link from "next/link";
+import { BookCover, BookCoverReadOnly } from "@/components/BookCover";
+import StarIcon from "@/components/icons/StarIcon";
+
+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 Link from "next/link";
+import type { ComponentProps } from "react";
+import clsx from "clsx";
+
+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 { createJazzReactApp, useDemoAuth, DemoAuthBasicUI } from "jazz-react";
+import { JazzAccount } from "@/schema";
+
+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://mesh.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 { useAccount } from "@/components/JazzAndAuth";
+import Link from "next/link";
+import { Container } from "@/components/Container";
+import { Button } from "@/components/Button";
+
+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 StarOutlineIcon from "@/components/icons/StarOutlineIcon";
+import StarIcon from "@/components/icons/StarIcon";
+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 { useCoState } from "@/components/JazzAndAuth";
+import { Group, ID } from "jazz-tools";
+import { JazzAccount, JazzProfile, ListOfBookReviews } from "@/schema";
+import { BookReviewThumbnail } from "@/components/BookReviewThumbnail";
+import { Button } from "@/components/Button";
+
+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

@@ -0,0 +1,20 @@
+export default function PlusIcon({ 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="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 {
+  CoMap,
+  co,
+  CoList,
+  Account,
+  Profile,
+  ImageDefinition,
+  Encoders,
+} 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

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

examples/chat-clerk/CHANGELOG.md

@@ -1,5 +1,33 @@
 # jazz-example-chat
 
+## 0.0.85
+
+### Patch Changes
+
+- Updated dependencies [c3f4e6b]
+- Updated dependencies [d9152ed]
+  - jazz-tools@0.8.5
+  - cojson@0.8.5
+  - jazz-react@0.8.5
+  - jazz-react-auth-clerk@0.8.5
+
+## 0.0.84
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.1
+
+## 0.0.83
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.8.3
+  - jazz-react@0.8.3
+  - jazz-react-auth-clerk@0.8.3
+  - jazz-tools@0.8.3
+
 ## 0.0.82
 
 ### Patch Changes

examples/chat-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat-clerk",
   "private": true,
-  "version": "0.0.82",
+  "version": "0.0.85",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -21,11 +21,11 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.0",
-    "hash-slash": "workspace:0.2.0",
-    "jazz-react": "workspace:0.8.2",
-    "jazz-react-auth-clerk": "workspace:0.8.2",
-    "jazz-tools": "workspace:0.8.2",
+    "cojson": "workspace:0.8.5",
+    "hash-slash": "workspace:0.2.1",
+    "jazz-react": "workspace:0.8.5",
+    "jazz-react-auth-clerk": "workspace:0.8.5",
+    "jazz-tools": "workspace:0.8.5",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -49,7 +49,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }

examples/chat-clerk/src/app.tsx

@@ -7,13 +7,14 @@ import { AppContainer, TopBar } from "./ui.tsx";
 
 export function App() {
   const { me, logOut } = useAccount();
+  const router = useIframeHashRouter();
 
   const createChat = () => {
     if (!me) return;
     const group = Group.create({ owner: me });
     group.addMember("everyone", "writer");
     const chat = Chat.create([], { owner: group });
-    location.hash = "/chat/" + chat.id;
+    router.navigate("/#/chat/" + chat.id);
   };
 
   return (
@@ -21,7 +22,7 @@ export function App() {
       <TopBar>
         {me?.profile?.name} · <button onClick={logOut}>Log out</button>
       </TopBar>
-      {useIframeHashRouter().route({
+      {router.route({
         "/": () => createChat() as never,
         "/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
       })}

examples/chat-rn/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+ios
+android

examples/chat-rn/CHANGELOG.md

@@ -0,0 +1,18 @@
+# chat-rn
+
+## 1.0.2
+
+### Patch Changes
+
+-   Updated dependencies [c3f4e6b]
+-   Updated dependencies [d9152ed]
+    -   jazz-react-native@0.8.5
+    -   jazz-tools@0.8.5
+
+## 1.0.1
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react-native@0.8.3
+    -   jazz-tools@0.8.3

examples/chat-rn/app.json

@@ -0,0 +1,46 @@
+{
+  "expo": {
+    "name": "jazz-chat-rn",
+    "scheme": "jazz-chat-rn",
+    "slug": "jazz-chat-rn",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.jazz.chatrn"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.jazz.chatrn"
+    },
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "newArchEnabled": true
+          },
+          "android": {
+            "newArchEnabled": true
+          }
+        }
+      ]
+    ],
+    "extra": {
+      "eas": {
+        "projectId": "e0e61872-1906-4c84-b9d8-9be77355cad0"
+      }
+    },
+    "owner": "paxx"
+  }
+}

examples/chat-rn/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ["babel-preset-expo"],
+        plugins: [
+            "nativewind/babel",
+            "@babel/plugin-transform-class-static-block",
+        ],
+    };
+};

examples/chat-rn/eas.json

@@ -0,0 +1,27 @@
+{
+    "cli": {
+        "version": ">= 12.5.1",
+        "appVersionSource": "remote"
+    },
+    "build": {
+        "development": {
+            "developmentClient": true,
+            "distribution": "internal"
+        },
+        "ios-simulator": {
+            "extends": "development",
+            "ios": {
+                "simulator": true
+            }
+        },
+        "preview": {
+            "distribution": "internal"
+        },
+        "production": {
+            "autoIncrement": true
+        }
+    },
+    "submit": {
+        "production": {}
+    }
+}

examples/chat-rn/index.js

@@ -0,0 +1,5 @@
+import "./polyfills";
+import { registerRootComponent } from "expo";
+import App from "./src/App";
+
+registerRootComponent(App);

examples/chat-rn/metro.config.js

@@ -0,0 +1,29 @@
+// Learn more https://docs.expo.dev/guides/monorepos
+const { getDefaultConfig } = require("expo/metro-config");
+const { FileStore } = require("metro-cache");
+const path = require("path");
+
+const projectRoot = __dirname;
+const workspaceRoot = path.resolve(projectRoot, "../..");
+
+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
+config.watchFolders = [workspaceRoot];
+// #2 - Try resolving with project modules first, then workspace modules
+config.resolver.nodeModulesPaths = [
+    path.resolve(projectRoot, "node_modules"),
+    path.resolve(workspaceRoot, "node_modules"),
+];
+config.resolver.sourceExts = ["js", "json", "ts", "tsx"];
+config.resolver.unstable_enablePackageExports = true;
+
+// Use turborepo to restore the cache when possible
+config.cacheStores = [
+    new FileStore({
+        root: path.join(projectRoot, "node_modules", ".cache", "metro"),
+    }),
+];
+
+module.exports = config;

examples/chat-rn/nativewind-env.d.ts

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

examples/chat-rn/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "chat-rn",
+    "version": "1.0.2",
+    "main": "index.js",
+    "scripts": {
+        "start": "expo start",
+        "android": "expo run:android",
+        "ios": "expo run:ios",
+        "web": "expo start --web"
+    },
+    "dependencies": {
+        "@azure/core-asynciterator-polyfill": "^1.0.2",
+        "@react-native-community/netinfo": "^11.3.1",
+        "@react-navigation/native": "^6.1.18",
+        "@react-navigation/native-stack": "^6.11.0",
+        "base-64": "^1.0.0",
+        "clsx": "^2.0.0",
+        "expo": "~51.0.36",
+        "expo-build-properties": "~0.12.5",
+        "expo-clipboard": "~6.0.3",
+        "expo-constants": "~16.0.2",
+        "expo-crypto": "~13.0.2",
+        "expo-dev-client": "~4.0.27",
+        "expo-linking": "~6.3.1",
+        "expo-status-bar": "~1.12.1",
+        "jazz-react-native": "workspace:*",
+        "jazz-tools": "workspace:*",
+        "nativewind": "^2.0.11",
+        "react": "^18.2.0",
+        "react-native": "~0.74.5",
+        "react-native-fetch-api": "^3.0.0",
+        "react-native-get-random-values": "^1.11.0",
+        "react-native-mmkv": "3.0.1",
+        "react-native-polyfill-globals": "^3.1.0",
+        "react-native-safe-area-context": "4.10.5",
+        "react-native-screens": "3.31.1",
+        "react-native-url-polyfill": "^2.0.0",
+        "text-encoding": "^0.7.0",
+        "web-streams-polyfill": "^3.2.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.0",
+        "@babel/plugin-transform-class-static-block": "^7.24.7",
+        "@types/react": "^18.2.19",
+        "tailwindcss": "3.3.2",
+        "typescript": "^5.3.3"
+    },
+    "private": true
+}

examples/chat-rn/polyfills.js

@@ -0,0 +1,6 @@
+import "react-native-polyfill-globals/auto";
+import "@azure/core-asynciterator-polyfill";
+import { ReadableStream } from "web-streams-polyfill/ponyfill/es6";
+import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
+
+polyfillGlobal("ReadableStream", () => ReadableStream);

examples/chat-rn/src/App.tsx

@@ -0,0 +1,78 @@
+import React, { StrictMode, useEffect, useState } from "react";
+import {
+    NavigationContainer,
+    useNavigationContainerRef,
+} from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import * as Linking from "expo-linking";
+import HandleInviteScreen from "./invite";
+
+import { useDemoAuth, DemoAuthBasicUI } from "jazz-react-native";
+import ChatScreen from "./chat";
+import { Jazz } from "./jazz";
+
+const Stack = createNativeStackNavigator();
+
+const prefix = Linking.createURL("/");
+
+const linking = {
+    prefixes: [prefix],
+    config: {
+        screens: {
+            HandleInviteScreen: {
+                path: "router/invite/:valueHint?/:valueID/:inviteSecret",
+            },
+        },
+    },
+};
+
+function App() {
+    const [auth, state] = useDemoAuth();
+    const [initialRoute, setInitialRoute] = useState<
+        "ChatScreen" | "HandleInviteScreen"
+    >("ChatScreen");
+    const navigationRef = useNavigationContainerRef();
+
+    useEffect(() => {
+        Linking.getInitialURL().then((url) => {
+            if (url) {
+                if (url && url.includes("invite")) {
+                    setInitialRoute("HandleInviteScreen");
+                }
+            }
+        });
+    }, []);
+
+    if (!auth) {
+        return null;
+    }
+
+    return (
+        <StrictMode>
+            <Jazz.Provider
+                auth={auth}
+                peer="wss://mesh.jazz.tools/?key=chat-rn-example-jazz@gcmp.io"
+                storage={undefined}
+            >
+                <NavigationContainer linking={linking} ref={navigationRef}>
+                    <Stack.Navigator initialRouteName={initialRoute}>
+                        <Stack.Screen
+                            options={{ title: "Jazz Chat" }}
+                            name="ChatScreen"
+                            component={ChatScreen}
+                        />
+                        <Stack.Screen
+                            name="HandleInviteScreen"
+                            component={HandleInviteScreen}
+                        />
+                    </Stack.Navigator>
+                </NavigationContainer>
+            </Jazz.Provider>
+            {state.state !== "signedIn" ? (
+                <DemoAuthBasicUI appName="Jazz Chat" state={state} />
+            ) : null}
+        </StrictMode>
+    );
+}
+
+export default App;

examples/chat-rn/src/chat.tsx

@@ -0,0 +1,208 @@
+import { useEffect, useState } from "react";
+import React, {
+    Button,
+    FlatList,
+    KeyboardAvoidingView,
+    SafeAreaView,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
+    Alert,
+} from "react-native";
+import { Group, ID } from "jazz-tools";
+import clsx from "clsx";
+import * as Clipboard from "expo-clipboard";
+
+import { Chat, Message } from "./schema";
+import { useAccount, useCoState } from "./jazz";
+
+export default function ChatScreen({ navigation }: { navigation: any }) {
+    const { me, logOut } = useAccount();
+    const [chat, setChat] = useState<Chat>();
+    const [message, setMessage] = useState("");
+    const loadedChat = useCoState(Chat, chat?.id, [{}]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        navigation.setOptions({
+            headerRight: () => <Button onPress={logOut} title="Logout" />,
+            headerLeft: () =>
+                chat ? (
+                    <Button
+                        onPress={() => {
+                            if (chat?.id) {
+                                Clipboard.setStringAsync(
+                                    `https://chat.jazz.tools/#/chat/${chat.id}`,
+                                );
+                                Alert.alert(
+                                    "Copied to clipboard",
+                                    `Chat ID: ${chat.id}`,
+                                );
+                            }
+                        }}
+                        title="Share"
+                    />
+                ) : null,
+        });
+    }, [navigation, chat]);
+
+    const createChat = () => {
+        const group = Group.create({ owner: me });
+        group.addMember("everyone", "writer");
+        const chat = Chat.create([], { owner: group });
+        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 = () => {
+        Alert.prompt(
+            "Join Chat",
+            "Enter the Chat ID (example: co_zBGEHYvRfGuT2YSBraY3njGjnde)",
+            [
+                {
+                    text: "Cancel",
+                    style: "cancel",
+                },
+                {
+                    text: "Join",
+                    onPress: (chatId) => {
+                        if (chatId) {
+                            loadChat(chatId as ID<Chat>);
+                        } else {
+                            Alert.alert("Error", "Chat ID cannot be empty.");
+                        }
+                    },
+                },
+            ],
+            "plain-text",
+        );
+    };
+
+    const sendMessage = () => {
+        if (!chat) return;
+        if (message.trim()) {
+            chat.push(
+                Message.create({ text: message }, { owner: chat._owner }),
+            );
+            setMessage("");
+        }
+    };
+
+    const renderMessageItem = ({ item }: { item: Message }) => {
+        const isMe = item._edits.text.by?.isMe;
+        return (
+            <View
+                className={clsx(
+                    `rounded-lg p-1 px-1.5 max-w-[80%] `,
+
+                    isMe
+                        ? `bg-gray-200 self-end text-right`
+                        : `bg-gray-300 self-start `,
+                )}
+            >
+                {!isMe ? (
+                    <Text
+                        className={clsx(
+                            `text-xs text-gray-500`,
+                            isMe ? "text-right" : "text-left",
+                        )}
+                    >
+                        {item._edits.text.by?.profile?.name}
+                    </Text>
+                ) : null}
+                <View
+                    className={clsx(
+                        "flex relative items-end justify-between",
+                        isMe ? "flex-row" : "flex-row",
+                    )}
+                >
+                    <Text className={clsx(`text-black text-md max-w-[85%]`)}>
+                        {item.text}
+                    </Text>
+                    <Text
+                        className={clsx(
+                            "text-[10px] text-gray-500 text-right ml-2",
+                            !isMe ? "mt-2" : "mt-1",
+                        )}
+                    >
+                        {item._edits.text.madeAt.getHours()}:
+                        {item._edits.text.madeAt.getMinutes()}
+                    </Text>
+                </View>
+            </View>
+        );
+    };
+
+    return (
+        <View className="flex flex-col h-full">
+            {!chat ? (
+                <View className="flex flex-col h-full items-center justify-center">
+                    <TouchableOpacity
+                        onPress={createChat}
+                        className="bg-blue-500 p-4 rounded-md"
+                    >
+                        <Text className="text-white font-semibold">
+                            Start new chat
+                        </Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        onPress={joinChat}
+                        className="bg-green-500 p-4 rounded-md mt-4"
+                    >
+                        <Text className="text-white font-semibold">
+                            Join chat
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            ) : (
+                <>
+                    <FlatList
+                        contentContainerStyle={{
+                            flexGrow: 1,
+                            flex: 1,
+                            gap: 6,
+                            padding: 8,
+                        }}
+                        className="flex"
+                        data={loadedChat}
+                        keyExtractor={(item) => item.id}
+                        renderItem={renderMessageItem}
+                    />
+
+                    <KeyboardAvoidingView
+                        keyboardVerticalOffset={110}
+                        behavior="padding"
+                        className="p-3 bg-white border-t border-gray-300"
+                    >
+                        <SafeAreaView className="flex flex-row items-center gap-2">
+                            <TextInput
+                                className="rounded-full h-8 py-0 px-2  border border-gray-200 block flex-1"
+                                value={message}
+                                onChangeText={setMessage}
+                                placeholder="Type a message..."
+                                textAlignVertical="center"
+                                onSubmitEditing={sendMessage}
+                            />
+                            <TouchableOpacity
+                                onPress={sendMessage}
+                                className="bg-gray-300 text-white rounded-full h-8 w-8 items-center justify-center"
+                            >
+                                <Text>↑</Text>
+                            </TouchableOpacity>
+                        </SafeAreaView>
+                    </KeyboardAvoidingView>
+                </>
+            )}
+        </View>
+    );
+}

examples/chat-rn/src/invite.tsx

@@ -0,0 +1,24 @@
+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,
+}: {
+    navigation: any;
+}) {
+    useAcceptInvite({
+        invitedObjectSchema: Chat,
+        onAccept: async (chatId) => {
+            navigation.navigate("ChatScreen", { chatId });
+        },
+    });
+
+    return <Text>Accepting invite...</Text>;
+}

examples/chat-rn/src/jazz.tsx

@@ -0,0 +1,8 @@
+import { createJazzRNApp } from "jazz-react-native";
+import { MMKVStorage } from "./mmkv-storage";
+import { Account } from "jazz-tools";
+
+const nativeStorage = new MMKVStorage();
+
+export const Jazz = createJazzRNApp({ nativeStorage });
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;

examples/chat-rn/src/mmkv-storage.ts

@@ -0,0 +1,25 @@
+import { MMKV } from "react-native-mmkv";
+import type { NativeStorage } from "jazz-react-native";
+
+const storage = new MMKV();
+
+export class MMKVStorage implements NativeStorage {
+    get(key: string): Promise<string | undefined> {
+        return Promise.resolve(storage.getString(key));
+    }
+
+    set(key: string, value: string): Promise<void> {
+        storage.set(key, value);
+        return Promise.resolve();
+    }
+
+    delete(key: string): Promise<void> {
+        storage.delete(key);
+        return Promise.resolve();
+    }
+
+    clearAll(): Promise<void> {
+        storage.clearAll();
+        return Promise.resolve();
+    }
+}

examples/chat-rn/src/schema.ts

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

examples/chat-rn/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./app/**/*.{js,jsx,ts,tsx}",
+        "./components/**/*.{js,jsx,ts,tsx}",
+        "./src/**/*.{js,jsx,ts,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};

examples/chat-rn/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "moduleResolution": "bundler"
+  },
+  "exclude": [
+    "src/tests"
+  ]
+}

examples/chat/.gitignore

@@ -23,4 +23,9 @@ dist-ssr
 *.sln
 *.sw?
 
-sync-db/
+sync-db/
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/chat/CHANGELOG.md

@@ -1,5 +1,32 @@
 # jazz-example-chat
 
+## 0.0.87
+
+### Patch Changes
+
+- Updated dependencies [c3f4e6b]
+- Updated dependencies [d9152ed]
+  - jazz-tools@0.8.5
+  - cojson@0.8.5
+  - jazz-react@0.8.5
+
+## 0.0.86
+
+### Patch Changes
+
+- Parent-frame friendlier naviation
+- Updated dependencies
+  - hash-slash@0.2.1
+
+## 0.0.85
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.8.3
+  - jazz-react@0.8.3
+  - jazz-tools@0.8.3
+
 ## 0.0.84
 
 ### Patch Changes

examples/chat/index.html

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

examples/chat/package.json

@@ -1,14 +1,16 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.84",
+  "version": "0.0.87",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "echo 'chat example is codegolfed'",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
   },
   "lint-staged": {
     "*.{ts,tsx}": "eslint --fix",
@@ -20,10 +22,10 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.0",
-    "hash-slash": "workspace:0.2.0",
-    "jazz-react": "workspace:0.8.2",
-    "jazz-tools": "workspace:0.8.2",
+    "cojson": "workspace:0.8.5",
+    "hash-slash": "workspace:0.2.1",
+    "jazz-react": "workspace:0.8.5",
+    "jazz-tools": "workspace:0.8.5",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -36,6 +38,7 @@
     "uniqolor": "^1.1.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.46.1",
     "@types/qrcode": "^1.5.1",
     "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
@@ -46,8 +49,9 @@
     "eslint": "^8.46.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }

examples/chat/playwright.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./tests",
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: isCI,
+    /* Retry on CI only */
+    retries: isCI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: isCI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: "html",
+
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: isCI ? "http://localhost:4173/" : "http://localhost:5173",
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+        permissions: ["clipboard-read", "clipboard-write"],
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: isCI ? {
+        command: "pnpm preview",
+        url: "http://localhost:4173/",
+    } : undefined,
+});

examples/chat/src/app.tsx

@@ -7,13 +7,14 @@ import { AppContainer, TopBar } from "./ui.tsx";
 
 export function App() {
   const { me, logOut } = useAccount();
+  const router = useIframeHashRouter();
 
   const createChat = () => {
     if (!me) return;
     const group = Group.create({ owner: me });
     group.addMember("everyone", "writer");
     const chat = Chat.create([], { owner: group });
-    location.hash = "/chat/" + chat.id;
+    router.navigate("/#/chat/" + chat.id);
   };
 
   return (
@@ -21,7 +22,7 @@ export function App() {
       <TopBar>
         <p>{me?.profile?.name}</p> · <button onClick={logOut}>Log out</button>
       </TopBar>
-      {useIframeHashRouter().route({
+      {router.route({
         "/": () => createChat() as never,
         "/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
       })}

examples/chat/src/chatScreen.tsx

@@ -9,18 +9,31 @@ import {
   ChatInput,
   EmptyChatMessage,
 } from "./ui.tsx";
+import { useState } from "react";
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
   const chat = useCoState(Chat, props.chatID, [{}]);
+  const [showNLastMessages, setShowNLastMessages] = useState(30);
 
   return chat ? (
     <>
       <ChatBody>
         {chat.length > 0 ? (
-          chat.map(msg => <ChatBubble msg={msg} key={msg.id} />)
+          chat
+            .slice(-showNLastMessages)
+            .reverse() // this plus flex-col-reverse on ChatBody gives us scroll-to-bottom behavior
+            .map(msg => <ChatBubble msg={msg} key={msg.id} />)
         ) : (
           <EmptyChatMessage />
         )}
+        {chat.length > showNLastMessages && (
+          <button
+            className="px-4 py-1 block mx-auto my-2 border rounded"
+            onClick={() => setShowNLastMessages(showNLastMessages + 10)}
+          >
+            Show more
+          </button>
+        )}
       </ChatBody>
       <ChatInput
         onSubmit={text => {
@@ -29,7 +42,7 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
       />
     </>
   ) : (
-    <div>Loading...</div>
+    <div className="flex-1 flex justify-center items-center">Loading...</div>
   );
 }
 

examples/chat/src/main.tsx

@@ -17,7 +17,10 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
       >
         {children}
       </Jazz.Provider>
-      {state.state !== "signedIn" && <DemoAuthBasicUI appName="Jazz Chat" state={state} />}
+      {
+        state.state !== "signedIn"
+        && <DemoAuthBasicUI appName="Jazz Chat" state={state} />
+      }
     </>
   );
 }

examples/chat/src/ui.tsx

@@ -1,3 +1,5 @@
+import { useId } from "react";
+
 export function AppContainer(props: { children: React.ReactNode }) {
   return (
     <div className="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-black dark:text-white">
@@ -16,7 +18,7 @@ export function TopBar(props: { children: React.ReactNode }) {
 
 export function ChatBody(props: { children: React.ReactNode }) {
   return (
-    <div className="flex-1 overflow-y-auto">
+    <div className="flex-1 overflow-y-auto flex flex-col-reverse" role="application">
       {props.children}
     </div>
   );
@@ -31,12 +33,12 @@ export function BubbleContainer(props: {
   fromMe: boolean | undefined;
 }) {
   const align = props.fromMe ? "items-end" : "items-start";
-  return <div className={`${align} flex flex-col m-2`}>{props.children}</div>;
+  return <div className={`${align} flex flex-col m-2`} role="row">{props.children}</div>;
 }
 
 export function BubbleBody(props: { children: React.ReactNode }) {
   return (
-    <div className="rounded-2xl text-sm bg-white dark:bg-stone-700 dark:text-white py-1 px-3 shadow-sm">
+    <div className="rounded-2xl text-sm line-clamp-10 text-ellipsis bg-white max-w-full whitespace-pre-wrap dark:bg-stone-700 dark:text-white py-1 px-3 shadow-sm">
       {props.children}
     </div>
   );
@@ -51,11 +53,16 @@ export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
 }
 
 export function ChatInput(props: { onSubmit: (text: string) => void }) {
+  const inputId = useId();
+
   return (
     <div className="p-3 bg-white border-t shadow-2xl mt-auto dark:bg-transparent dark:border-stone-800">
+      <label className="sr-only" htmlFor={inputId}>Type a message and press Enter</label>
       <input
+        id={inputId}
         className="rounded-full py-2 px-4 text-sm border block w-full dark:bg-black dark:text-white dark:border-stone-700"
         placeholder="Type a message and press Enter"
+        maxLength={2048}
         onKeyDown={({ key, currentTarget: input }) => {
           if (key !== "Enter" || !input.value) return;
           props.onSubmit(input.value);

examples/chat/tailwind.config.js

@@ -69,6 +69,9 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      lineClamp: {
+        10: '10',
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],

examples/chat/tests/chat.spec.ts

@@ -0,0 +1,50 @@
+import { test } from "@playwright/test";
+import { LoginPage } from "./pages/LoginPage";
+import { ChatPage } from "./pages/ChatPage";
+
+test("chat between two users", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+
+    const mario = "S. Mario";
+    const luigi = "Luigi";
+
+    await loginPage.goto();
+    await loginPage.fillUsername(mario);
+    await loginPage.signup();
+
+    const chatPage = new ChatPage(page);
+
+    const message1ByMario = "Hello Luigi, are you ready to save the princess?"
+
+    await chatPage.sendMessage(message1ByMario);
+    await chatPage.expectMessageRow(message1ByMario);
+
+    const roomURL = page.url();
+
+    await chatPage.logout();
+
+    await loginPage.expectLoaded();
+
+    await loginPage.fillUsername(luigi);
+    await loginPage.signup();
+
+    await page.goto(roomURL);
+
+    await chatPage.expectMessageRow(message1ByMario);
+
+    const message2ByLuigi = "No, I'm not ready yet. I'm still trying to find the key to the castle."
+
+    await chatPage.sendMessage(message2ByLuigi);
+    await chatPage.expectMessageRow(message2ByLuigi);
+
+    // This breaks with (Error: Error reading from peer storage, handling msg)
+    // await chatPage.logout();
+    // await loginPage.loginAs(mario);
+
+    // await chatPage.expectLoaded();
+
+    // await page.goto(roomURL);
+
+    // await chatPage.expectMessageRow(message1ByMario);
+    // await chatPage.expectMessageRow(message2ByLuigi);
+});

examples/chat/tests/pages/ChatPage.ts

@@ -0,0 +1,35 @@
+import { Page, Locator, expect } from "@playwright/test";
+
+export class ChatPage {
+  readonly page: Page;
+  readonly messageInput: Locator;
+  readonly logoutButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.messageInput = page.getByRole("textbox", {
+        name: "Type a message and press Enter"
+    });
+    this.logoutButton = page.getByRole("button", {
+      name: "Log out",
+    });
+  }
+
+  async sendMessage(message: string) {
+    await this.messageInput.fill(message);
+    await this.messageInput.press("Enter");
+  }
+
+  async expectLoaded() {
+    await expect(this.messageInput).toBeVisible();
+  }
+
+  async expectMessageRow(message: string) {
+    await expect(this.page.getByText(message)).toBeVisible();
+  }
+
+  async logout() {
+    await this.logoutButton.click();
+    await this.page.goto("/");
+  }
+}

examples/chat/tests/pages/LoginPage.ts

@@ -0,0 +1,40 @@
+import { Page, Locator, expect } from "@playwright/test";
+
+export class LoginPage {
+    readonly page: Page;
+    readonly usernameInput: Locator;
+    readonly signupButton: Locator;
+
+    constructor(page: Page) {
+        this.page = page;
+        this.usernameInput = page.getByRole("textbox");
+        this.signupButton = page.getByRole("button", {
+            name: "Sign up",
+        });
+    }
+
+    async goto() {
+        this.page.goto("/");
+    }
+
+    async fillUsername(value: string) {
+        await this.usernameInput.clear();
+        await this.usernameInput.fill(value);
+    }
+
+    async loginAs(value: string) {
+        await this.page
+            .getByRole("button", {
+                name: `Log in as "${value}"`,
+            })
+            .click();
+    }
+
+    async signup() {
+        await this.signupButton.click();
+    }
+
+    async expectLoaded() {
+        await expect(this.signupButton).toBeVisible();
+    }
+}

examples/inspector/CHANGELOG.md

@@ -1,243 +1,267 @@
 # jazz-example-inspector
 
-## 0.0.60
+## 0.0.63
 
 ### Patch Changes
 
-- Updated dependencies [6a147c2]
-- Updated dependencies [ad40b88]
-  - cojson@0.8.0
-  - cojson-transport-ws@0.8.0
+-   Updated dependencies [c3f4e6b]
+-   Updated dependencies [d9152ed]
+    -   cojson@0.8.5
+    -   cojson-transport-ws@0.8.5
+
+## 0.0.62
+
+### Patch Changes
+
+-   Updated dependencies
+    -   hash-slash@0.2.1
+
+## 0.0.61
+
+### Patch Changes
+
+-   Updated dependencies
+    -   cojson@0.8.3
+    -   cojson-transport-ws@0.8.3
 
 ## 0.0.60
 
 ### Patch Changes
 
-- 63daf6a: fix(inspector): subscribe to latent covalues instead of loading them immediately
-- Updated dependencies [35bbcd9]
-- Updated dependencies [f350e90]
-  - cojson@0.7.35
-  - cojson-transport-ws@0.7.35
+-   Updated dependencies [6a147c2]
+-   Updated dependencies [ad40b88]
+    -   cojson@0.8.0
+    -   cojson-transport-ws@0.8.0
+
+## 0.0.60
+
+### Patch Changes
+
+-   63daf6a: fix(inspector): subscribe to latent covalues instead of loading them immediately
+-   Updated dependencies [35bbcd9]
+-   Updated dependencies [f350e90]
+    -   cojson@0.7.35
+    -   cojson-transport-ws@0.7.35
 
 ## 0.0.59
 
 ### Patch Changes
 
-- Updated dependencies [5d91f9f]
-- Updated dependencies [5094e6d]
-- Updated dependencies [b09589b]
-- Updated dependencies [2c3a40c]
-- Updated dependencies [406ab9b]
-- Updated dependencies [4e16575]
-- Updated dependencies [ea882ab]
-  - cojson@0.7.34
-  - cojson-transport-ws@0.7.34
+-   Updated dependencies [5d91f9f]
+-   Updated dependencies [5094e6d]
+-   Updated dependencies [b09589b]
+-   Updated dependencies [2c3a40c]
+-   Updated dependencies [406ab9b]
+-   Updated dependencies [4e16575]
+-   Updated dependencies [ea882ab]
+    -   cojson@0.7.34
+    -   cojson-transport-ws@0.7.34
 
 ## 0.0.59-neverthrow.6
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.8
-  - cojson-transport-ws@0.7.34-neverthrow.8
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.8
+    -   cojson-transport-ws@0.7.34-neverthrow.8
 
 ## 0.0.59-neverthrow.5
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.7
-  - cojson-transport-ws@0.7.34-neverthrow.7
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.7
+    -   cojson-transport-ws@0.7.34-neverthrow.7
 
 ## 0.0.59-neverthrow.4
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.4
-  - cojson-transport-ws@0.7.34-neverthrow.4
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.4
+    -   cojson-transport-ws@0.7.34-neverthrow.4
 
 ## 0.0.59-neverthrow.3
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.3
-  - cojson-transport-ws@0.7.34-neverthrow.3
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.3
+    -   cojson-transport-ws@0.7.34-neverthrow.3
 
 ## 0.0.59-neverthrow.2
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.34-neverthrow.2
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.34-neverthrow.2
 
 ## 0.0.59-neverthrow.1
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.1
-  - cojson-transport-ws@0.7.34-neverthrow.1
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.1
+    -   cojson-transport-ws@0.7.34-neverthrow.1
 
 ## 0.0.59-neverthrow.0
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.0
-  - cojson-transport-ws@0.7.34-neverthrow.0
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.0
+    -   cojson-transport-ws@0.7.34-neverthrow.0
 
 ## 0.0.58
 
 ### Patch Changes
 
-- Updated dependencies [fdde8db]
-- Updated dependencies [b297c93]
-- Updated dependencies [07fe2b9]
-- Updated dependencies [3bf5127]
-- Updated dependencies [a8b74ff]
-- Updated dependencies [db53161]
-  - cojson-transport-ws@0.7.33
-  - cojson@0.7.33
+-   Updated dependencies [fdde8db]
+-   Updated dependencies [b297c93]
+-   Updated dependencies [07fe2b9]
+-   Updated dependencies [3bf5127]
+-   Updated dependencies [a8b74ff]
+-   Updated dependencies [db53161]
+    -   cojson-transport-ws@0.7.33
+    -   cojson@0.7.33
 
 ## 0.0.58-hotfixes.5
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.33-hotfixes.5
-  - cojson-transport-ws@0.7.33-hotfixes.5
+-   Updated dependencies
+    -   cojson@0.7.33-hotfixes.5
+    -   cojson-transport-ws@0.7.33-hotfixes.5
 
 ## 0.0.58-hotfixes.4
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.33-hotfixes.4
-  - cojson-transport-ws@0.7.33-hotfixes.4
+-   Updated dependencies
+    -   cojson@0.7.33-hotfixes.4
+    -   cojson-transport-ws@0.7.33-hotfixes.4
 
 ## 0.0.58-hotfixes.3
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.33-hotfixes.3
-  - cojson@0.7.33-hotfixes.3
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.33-hotfixes.3
+    -   cojson@0.7.33-hotfixes.3
 
 ## 0.0.58-hotfixes.2
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.33-hotfixes.2
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.33-hotfixes.2
 
 ## 0.0.58-hotfixes.1
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.33-hotfixes.1
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.33-hotfixes.1
 
 ## 0.0.58-hotfixes.0
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.33-hotfixes.0
-  - cojson-transport-ws@0.7.33-hotfixes.0
+-   Updated dependencies
+    -   cojson@0.7.33-hotfixes.0
+    -   cojson-transport-ws@0.7.33-hotfixes.0
 
 ## 0.0.57
 
 ### Patch Changes
 
-- Updated dependencies
-- Updated dependencies
-  - cojson-transport-ws@0.7.31
-  - cojson@0.7.31
+-   Updated dependencies
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.31
+    -   cojson@0.7.31
 
 ## 0.0.56
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.30
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.30
 
 ## 0.0.55
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.29
-  - cojson-transport-ws@0.7.29
+-   Updated dependencies
+    -   cojson@0.7.29
+    -   cojson-transport-ws@0.7.29
 
 ## 0.0.54
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.28
-  - cojson-transport-ws@0.7.28
+-   Updated dependencies
+    -   cojson@0.7.28
+    -   cojson-transport-ws@0.7.28
 
 ## 0.0.53
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.27
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.27
 
 ## 0.0.52
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.26
-  - cojson-transport-ws@0.7.26
+-   Updated dependencies
+    -   cojson@0.7.26
+    -   cojson-transport-ws@0.7.26
 
 ## 0.0.51
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.23
-  - cojson-transport-ws@0.7.23
+-   Updated dependencies
+    -   cojson@0.7.23
+    -   cojson-transport-ws@0.7.23
 
 ## 0.0.50
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.22
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.22
 
 ## 0.0.49
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.18
-  - cojson-transport-ws@0.7.18
+-   Updated dependencies
+    -   cojson@0.7.18
+    -   cojson-transport-ws@0.7.18
 
 ## 0.0.48
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.17
-  - cojson-transport-ws@0.7.17
+-   Updated dependencies
+    -   cojson@0.7.17
+    -   cojson-transport-ws@0.7.17
 
 ## 0.0.47
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.6.7
-  - jazz-react@0.5.5
-  - jazz-react-auth-local@0.4.18
+-   Updated dependencies
+    -   cojson@0.6.7
+    -   jazz-react@0.5.5
+    -   jazz-react-auth-local@0.4.18
 
 ## 0.0.46
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.5.0
-  - jazz-react-auth-local@0.4.16
+-   Updated dependencies
+    -   jazz-react@0.5.0
+    -   jazz-react-auth-local@0.4.16

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.60",
+  "version": "0.0.63",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,9 +15,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.0",
-    "cojson-transport-ws": "workspace:0.8.0",
-    "hash-slash": "workspace:0.2.0",
+    "cojson": "workspace:0.8.5",
+    "cojson-transport-ws": "workspace:0.8.5",
+    "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -41,7 +41,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }

examples/inspector/src/viewer/co-stream-view.tsx

@@ -5,16 +5,16 @@ import {
     RawCoStream,
     RawCoValue,
 } from "cojson";
-import { JsonObject, JsonValue } from "cojson/src/jsonValue";
+import { JsonObject, JsonValue } from "cojson/src/jsonValue.ts";
 import { PageInfo } from "./types";
-import { base64URLtoBytes } from "cojson/src/base64url";
+import { base64URLtoBytes } from "cojson/src/base64url.ts";
 import { useEffect, useState } from "react";
 import { ArrowDownToLine } from "lucide-react";
 import {
     BinaryStreamItem,
     BinaryStreamStart,
     CoStreamItem,
-} from "cojson/src/coValues/coStream";
+} from "cojson/src/coValues/coStream.ts";
 import { AccountOrGroupPreview } from "./value-renderer";
 
 // typeguard for BinaryStreamStart

examples/inspector/src/viewer/grid-view.tsx

@@ -1,5 +1,5 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue";
+import { JsonObject } from "cojson/src/jsonValue.ts";
 import { CoMapPreview, ValueRenderer } from "./value-renderer";
 import clsx from "clsx";
 import { PageInfo, isCoId } from "./types";

examples/inspector/src/viewer/table-viewer.tsx

@@ -1,5 +1,5 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue";
+import { JsonObject } from "cojson/src/jsonValue.ts";
 import { PageInfo } from "./types";
 import { useMemo, useState } from "react";
 import { ValueRenderer } from "./value-renderer";

examples/music-player/CHANGELOG.md

@@ -1,5 +1,21 @@
 # jazz-example-musicplayer
 
+## 0.0.7
+
+### Patch Changes
+
+-   Updated dependencies [c3f4e6b]
+-   Updated dependencies [d9152ed]
+    -   jazz-tools@0.8.5
+    -   jazz-react@0.8.5
+
+## 0.0.6
+
+### Patch Changes
+
+-   jazz-react@0.8.3
+-   jazz-tools@0.8.3
+
 ## 0.0.5
 
 ### Patch Changes

examples/music-player/README.md

@@ -10,14 +10,14 @@ Start by checking out `jazz`
 
 ```bash
 git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/musicPlayer
+cd jazz/examples/music-player
 pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/musicPlayer # or any other directory
-tar -xf /tmp/jazz-example-musicPlayer-* --strip-components 1 -C ~/jazz-examples/musicPlayer
-cd ~/jazz-examples/musicPlayer
+mkdir -p ~/jazz-examples/music-player # or any other directory
+tar -xf /tmp/jazz-example-music-player-* --strip-components 1 -C ~/jazz-examples/music-player
+cd ~/jazz-examples/music-player
 ```
 
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
+This ensures you have the example app without git history and independent of the Jazz multi-package monorepo.
 
 Install dependencies:
 

examples/music-player/components.json

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

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
     "name": "jazz-example-music-player",
     "private": true,
-    "version": "0.0.5",
+    "version": "0.0.7",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -15,10 +15,14 @@
         "*.{js,jsx,mdx,json}": "prettier --write"
     },
     "dependencies": {
+        "@radix-ui/react-dropdown-menu": "^2.1.1",
+        "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-toast": "^1.1.4",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
-        "jazz-react": "workspace:0.8.2",
-        "jazz-tools": "workspace:0.8.2",
+        "jazz-react": "workspace:0.8.5",
+        "jazz-tools": "workspace:0.8.5",
+        "lucide-react": "^0.274.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.16.0",
@@ -37,7 +41,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.3",
         "postcss": "^8.4.27",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "3.3.2",
         "typescript": "^5.3.3",
         "vite": "^5.0.10"
     }

examples/music-player/src/2_main.tsx

@@ -1,13 +1,11 @@
+/* eslint-disable react-refresh/only-export-components */
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createHashRouter, RouterProvider } from "react-router-dom";
-import { useMediaPlayer } from "./4_useMediaPlayer";
-import { HomePage } from "./5_HomePage";
-import { createNewPlaylist, uploadMusicTracks } from "./3_actions";
-import { PlaylistPage } from "./6_PlaylistPage";
-import { InvitePage } from "./7_InvitePage";
-import { Button } from "./basicComponents/Button";
-import { FileUploadButton } from "./basicComponents/FileUploadButton";
+import { Toaster } from "@/components/ui/toaster"
+import { useMediaPlayer } from "./5_useMediaPlayer";
+import { HomePage } from "./3_HomePage";
+import { InvitePage } from "./6_InvitePage";
 import { PlayerControls } from "./components/PlayerControls";
 import "./index.css";
 
@@ -25,8 +23,9 @@ import { useUploadExampleData } from "./lib/useUploadExampleData";
  *
  * `<Jazz.Provider/>` also runs our account migration
  */
+
 const Jazz = createJazzReactApp({
-    AccountSchema: MusicaAccount
+    AccountSchema: MusicaAccount,
 });
 
 export const { useAccount, useCoState, useAcceptInvite } = Jazz;
@@ -36,31 +35,6 @@ function Main() {
 
     useUploadExampleData();
 
-    /**
-     * `me` represents the current user account, which will determine
-     *  access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
-     */
-    const { me } = useAccount();
-
-    async function handleFileLoad(files: FileList) {
-        if (!me) return;
-
-        /**
-         * Follow this function definition to see how we update
-         * values in Jazz and manage files!
-         */
-        /** Walkthrough: Continue with ./3_actions.ts */
-        await uploadMusicTracks(me, files);
-    }
-
-    async function handleCreatePlaylist() {
-        if (!me) return;
-
-        const playlist = await createNewPlaylist(me);
-
-        router.navigate(`/playlist/${playlist.id}`);
-    }
-
     const router = createHashRouter([
         {
             path: "/",
@@ -68,7 +42,7 @@ function Main() {
         },
         {
             path: "/playlist/:playlistId",
-            element: <PlaylistPage mediaPlayer={mediaPlayer} />,
+            element: <HomePage mediaPlayer={mediaPlayer} />,
         },
         {
             path: "/invite/*",
@@ -78,20 +52,9 @@ function Main() {
 
     return (
         <>
-            <div className="flex items-center bg-gray-300">
-                <img src="jazz-logo.png" className="px-3 h-[20px]" />
-                <div className="text-nowrap">Jazz music player</div>
-                <div className="flex w-full gap-1 justify-end">
-                    <FileUploadButton onFileLoad={handleFileLoad}>
-                        Add file
-                    </FileUploadButton>
-                    <Button onClick={handleCreatePlaylist}>
-                        Create new playlist
-                    </Button>
-                </div>
-            </div>
             <RouterProvider router={router} />
             <PlayerControls mediaPlayer={mediaPlayer} />
+            <Toaster />
         </>
     );
 }
@@ -101,7 +64,10 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
 
     return (
         <>
-            <Jazz.Provider auth={auth} peer="wss://mesh.jazz.tools/?key=music-player-example-jazz@gcmp.io">
+            <Jazz.Provider
+                auth={auth}
+                peer="wss://mesh.jazz.tools/?key=music-player-example-jazz@gcmp.io"
+            >
                 {children}
             </Jazz.Provider>
             <DemoAuthBasicUI appName="Jazz Music Player" state={state} />

examples/music-player/src/3_HomePage.tsx

@@ -0,0 +1,144 @@
+import { useAccount, useCoState } from "./2_main";
+import { MediaPlayer } from "./5_useMediaPlayer";
+import { MusicTrackRow } from "./components/MusicTrackRow";
+import { usePlayState } from "./lib/audio/usePlayState";
+import { SidePanel } from "./components/SidePanel";
+import { FileUploadButton } from "./components/FileUploadButton";
+import { Button } from "./components/ui/button";
+import { createNewPlaylist, uploadMusicTracks } from "./4_actions";
+import { useNavigate, useParams } from "react-router";
+import { ID } from "jazz-tools";
+import { Playlist } from "./1_schema";
+import { createInviteLink } from "jazz-react";
+import { useToast } from "@/hooks/use-toast"
+
+export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
+    /**
+     * `me` represents the current user account, which will determine
+     *  access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
+     */
+    const { me } = useAccount({
+        root: {
+            rootPlaylist: {},
+            playlists: [],
+        },
+    });
+
+    const navigate = useNavigate();
+    const playState = usePlayState();
+    const isPlaying = playState.value === "play";
+    const { toast } = useToast()
+
+    async function handleFileLoad(files: FileList) {
+        if (!me) return;
+
+        /**
+         * Follow this function definition to see how we update
+         * values in Jazz and manage files!
+         */
+        await uploadMusicTracks(me, files);
+    }
+
+    async function handleCreatePlaylist() {
+        if (!me) return;
+
+        const playlist = await createNewPlaylist(me);
+
+        navigate(`/playlist/${playlist.id}`);
+    }
+
+    const params = useParams<{ playlistId: ID<Playlist> }>();
+    const playlistId = params.playlistId ?? me?.root._refs.rootPlaylist.id;
+    const playlist = useCoState(Playlist, playlistId, {
+        tracks: [],
+    });
+
+    const isRootPlaylist = !params.playlistId;
+    const isPlaylistOwner = playlist?._owner.myRole() === "admin";
+    const isActivePlaylist = playlistId === me?.root.activePlaylist?.id;
+
+    const handlePlaylistTitleChange = (
+        evt: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+        if (!playlist) return;
+
+        playlist.title = evt.target.value;
+    };
+
+    const handlePlaylistShareClick = async () => {
+        if (!isPlaylistOwner) return;
+
+        const inviteLink = createInviteLink(playlist, "reader");
+
+        await navigator.clipboard.writeText(inviteLink);
+
+        toast({
+            title: "Invite link copied into the clipboard",
+        });
+    };
+
+    return (
+        <div className="flex flex-col h-screen text-gray-800 bg-blue-50">
+            <div className="flex flex-1 overflow-hidden">
+                <SidePanel />
+                <main className="flex-1 p-6 overflow-y-auto">
+                    <div className="flex items-center justify-between mb-6">
+                        {isRootPlaylist ? (
+                            <h1 className="text-2xl font-bold text-blue-800">
+                                All tracks
+                            </h1>
+                        ) : (
+                            <input
+                                value={playlist?.title ?? ""}
+                                onChange={handlePlaylistTitleChange}
+                                className="text-2xl font-bold text-blue-800 bg-transparent"
+                                disabled={!isPlaylistOwner}
+                            />
+                        )}
+                        <div className="flex items-center space-x-4">
+                            {isRootPlaylist && (
+                                <>
+                                    <FileUploadButton
+                                        onFileLoad={handleFileLoad}
+                                    >
+                                        Add file
+                                    </FileUploadButton>
+                                    <Button onClick={handleCreatePlaylist}>
+                                        Create new playlist
+                                    </Button>
+                                </>
+                            )}
+                            {!isRootPlaylist && (
+                                <Button onClick={handlePlaylistShareClick}>
+                                    Share playlist
+                                </Button>
+                            )}
+                        </div>
+                    </div>
+                    <ul className="flex flex-col">
+                        {playlist?.tracks?.map(
+                            (track) =>
+                                track && (
+                                    <MusicTrackRow
+                                        trackId={track.id}
+                                        key={track.id}
+                                        isLoading={
+                                            mediaPlayer.loading === track.id
+                                        }
+                                        isPlaying={
+                                            mediaPlayer.activeTrackId ===
+                                                track.id && isActivePlaylist && isPlaying
+                                        }
+                                        onClick={() => {
+                                            mediaPlayer.setActiveTrack(track, playlist);
+                                        }}
+                                        showAddToPlaylist={isRootPlaylist}
+                                    />
+                                ),
+                        )}
+                    </ul>
+                </main>
+            </div>
+        </div>
+    );
+}

examples/music-player/src/4_actions.ts

@@ -92,6 +92,8 @@ export async function addTrackToPlaylist(
 ) {
     if (!account) return;
 
+    if (playlist.tracks?.some((t) => t?._refs.sourceTrack.id === track.id)) return;
+
     /**
      * Since musicTracks are created as private values (see uploadMusicTracks)
      * to make them shareable as part of the playlist we are cloning them

examples/music-player/src/5_HomePage.tsx

@@ -1,60 +0,0 @@
-import { useAccount } from "./2_main";
-import { MediaPlayer } from "./4_useMediaPlayer";
-import { Link } from "./basicComponents/Link";
-import { MusicTrackRow } from "./components/MusicTrackRow";
-import { usePlayState } from "./lib/audio/usePlayState";
-
-export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
-    const { me } = useAccount({
-        root: {
-            rootPlaylist: {
-                tracks: [{}],
-            },
-            playlists: [{}],
-        },
-    });
-
-    const tracks = me?.root.rootPlaylist.tracks;
-
-    const playState = usePlayState();
-    const isPlaying = playState.value === "play";
-
-    const playlists = me?.root.playlists;
-
-    return (
-        <>
-            {playlists && playlists.length > 0 && (
-                <div className="p-3">
-                    <b>Playlists</b>
-                    <div className="flex py-6 gap-6">
-                        {playlists.map((playlist) => (
-                            <Link
-                                key={playlist.id}
-                                to={`/playlist/${playlist.id}`}
-                            >
-                                {playlist.title}
-                            </Link>
-                        ))}
-                    </div>
-                </div>
-            )}
-            <ul className="flex flex-col">
-                {tracks?.map(
-                    (track) =>
-                        track && (
-                            <MusicTrackRow
-                                track={track}
-                                key={track.id}
-                                isLoading={mediaPlayer.loading === track.id}
-                                isPlaying={
-                                    mediaPlayer.activeTrack?.id === track.id &&
-                                    isPlaying
-                                }
-                                onClick={mediaPlayer.setActiveTrack}
-                            />
-                        ),
-                )}
-            </ul>
-        </>
-    );
-}

examples/music-player/src/5_useMediaPlayer.ts

@@ -1,6 +1,6 @@
 import { usePlayMedia } from "@/lib/audio/usePlayMedia";
 import { usePlayState } from "@/lib/audio/usePlayState";
-import { useAccount, useCoState } from "./2_main";
+import { useAccount } from "./2_main";
 import { MusicTrack, Playlist } from "@/1_schema";
 import { useRef, useState } from "react";
 import { getNextTrack, getPrevTrack } from "./lib/getters";
@@ -14,7 +14,7 @@ export function useMediaPlayer() {
 
     const [loading, setLoading] = useState<ID<MusicTrack> | null>(null);
 
-    const activeTrack = useCoState(MusicTrack, me?.root?._refs.activeTrack?.id);
+    const activeTrackId = me?.root?._refs.activeTrack?.id
 
     // Reference used to avoid out-of-order track loads
     const lastLoadedTrackId = useRef<ID<MusicTrack> | null>(null);
@@ -71,7 +71,7 @@ export function useMediaPlayer() {
         if (!me?.root) return;
 
         if (
-            activeTrack?.id === track.id &&
+            activeTrackId === track.id &&
             lastLoadedTrackId.current !== null
         ) {
             playState.toggle();
@@ -88,7 +88,7 @@ export function useMediaPlayer() {
     }
 
     return {
-        activeTrack,
+        activeTrackId,
         setActiveTrack,
         playNextTrack,
         playPrevTrack,

examples/music-player/src/6_PlaylistPage.tsx

@@ -1,84 +0,0 @@
-import { createInviteLink } from "jazz-react";
-import { ID } from "jazz-tools";
-import { ChangeEvent } from "react";
-import { useParams } from "react-router";
-import { useAccount, useCoState } from "./2_main";
-import { Playlist } from "./1_schema";
-import { MediaPlayer } from "./4_useMediaPlayer";
-import { addTrackToPlaylist } from "./3_actions";
-import { Button } from "./basicComponents/Button";
-import { Link } from "./basicComponents/Link";
-import { MusicTrackRow } from "./components/MusicTrackRow";
-import { usePlayState } from "./lib/audio/usePlayState";
-import { AddTracksToPlaylistSection } from "./components/AddTracksToPlaylistSection";
-
-export function PlaylistPage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
-    const { playlistId } = useParams<{ playlistId: ID<Playlist> }>();
-
-    const playlist = useCoState(Playlist, playlistId, {
-        tracks: [{}],
-    });
-
-    const { me } = useAccount();
-
-    const playState = usePlayState();
-    const isPlaying = playState.value === "play";
-
-    if (!playlist) return null;
-
-    const handlePlaylistTitleChange = (evt: ChangeEvent<HTMLInputElement>) => {
-        playlist.title = evt.target.value;
-    };
-
-    const handlePlaylistShareClick = async () => {
-        if (playlist._owner.myRole() !== "admin") return;
-
-        const inviteLink = createInviteLink(playlist, "reader");
-
-        await navigator.clipboard.writeText(inviteLink);
-
-        alert(`Invite link copied into the clipboard`);
-    };
-
-    return (
-        <>
-            <div className="flex bg-gray-200">
-                <Link to="/">Back</Link>
-
-                <input
-                    className="w-full bg-transparent p-1 m-1"
-                    value={playlist.title}
-                    onChange={handlePlaylistTitleChange}
-                />
-
-                <Button onClick={handlePlaylistShareClick}>Share</Button>
-            </div>
-            <ul className="flex flex-col py-6">
-                {playlist.tracks?.map(
-                    (track) =>
-                        track && (
-                            <MusicTrackRow
-                                track={track}
-                                key={track.id}
-                                isLoading={mediaPlayer.loading === track.id}
-                                isPlaying={
-                                    mediaPlayer.activeTrack?.id === track.id &&
-                                    isPlaying
-                                }
-                                onClick={() => {
-                                    mediaPlayer.setActiveTrack(track, playlist);
-                                }}
-                            />
-                        ),
-                )}
-            </ul>
-
-            <AddTracksToPlaylistSection
-                playlist={playlist}
-                onTrackClick={(track) =>
-                    addTrackToPlaylist(playlist, track, me)
-                }
-            />
-        </>
-    );
-}

examples/music-player/src/basicComponents/Button.tsx

@@ -1,20 +0,0 @@
-import { cn } from "@/lib/utils";
-import { ReactNode } from "react";
-
-export function Button(props: {
-    className?: string;
-    onClick?: () => void;
-    children: ReactNode;
-}) {
-    return (
-        <button
-            onClick={props.onClick}
-            className={cn(
-                "p-2 bg-blue-300 hover:cursor-pointer flex items-center",
-                props.className,
-            )}
-        >
-            {props.children}
-        </button>
-    );
-}

examples/music-player/src/basicComponents/Link.tsx

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-import { Link as RouterLink } from "react-router-dom";
-
-export function Link(props: { to: string; children: ReactNode }) {
-    return (
-        <RouterLink
-            to={props.to}
-            className="p-2 w-fit bg-blue-300 hover:cursor-pointer flex items-center"
-        >
-            {props.children}
-        </RouterLink>
-    );
-}

examples/music-player/src/components/AddTracksToPlaylistSection.tsx

@@ -1,79 +0,0 @@
-import { useAccount, useCoState } from "@/2_main";
-import { Playlist, MusicTrack, ListOfTracks } from "@/1_schema";
-import { Button } from "@/basicComponents/Button";
-import { useState } from "react";
-
-export function AddTracksToPlaylistSection({
-    playlist,
-    onTrackClick,
-}: {
-    playlist: Playlist;
-    onTrackClick: (track: MusicTrack) => Promise<void>;
-}) {
-    const { me } = useAccount({
-        root: {
-            rootPlaylist: {
-                tracks: [{}],
-            },
-        },
-    });
-
-    const listOfTracks = useCoState(ListOfTracks, playlist._refs.tracks.id, []);
-
-    const currentTracksIds = new Set(
-        listOfTracks?.map((track) => track?._refs.sourceTrack?.id),
-    );
-    const tracksToAdd = me?.root.rootPlaylist.tracks.filter(
-        (track) => !currentTracksIds.has(track.id),
-    );
-
-    if (!tracksToAdd?.length) return null;
-
-    return (
-        <div>
-            Add tracks to the playlist
-            <ul className="flex flex-col px-1 py-6 gap-6">
-                {tracksToAdd.map((track) => (
-                    <li
-                        key={track.id}
-                        className={"flex items-center gap-6 bg-slate-200"}
-                    >
-                        <AddTrackButton
-                            track={track}
-                            onTrackClick={onTrackClick}
-                        />
-                        {track.title}
-                    </li>
-                ))}
-            </ul>
-        </div>
-    );
-}
-
-function AddTrackButton({
-    track,
-    onTrackClick,
-}: {
-    track: MusicTrack;
-    onTrackClick: (track: MusicTrack) => Promise<void>;
-}) {
-    const [isLoading, setLoading] = useState(false);
-
-    async function handleClick() {
-        if (isLoading) return;
-
-        setLoading(true);
-
-        try {
-            await onTrackClick(track);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    return (
-        <Button className="py-2 px-4" onClick={handleClick}>
-            {isLoading ? <div className="animate-spin">߷</div> : "+"}
-        </Button>
-    );
-}