Release

Merge pull request #469 from gardencmp/trishalim-jazz-342
Add book shelf example
2024-10-09 17:34:10 +01:00 · 2024-10-09 17:30:41 +01:00 · 2024-10-09 17:30:10 +01:00 · 2024-10-09 17:26:36 +01:00 · 2024-10-09 17:25:51 +01:00 · 2024-10-09 17:06:04 +01:00
269 changed files with 18426 additions and 2270 deletions
--- a/.changeset/config.json
+++ b/.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",
--- a/.github/workflows/playwright.yml
+++ b/.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", "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
--- a/.github/workflows/unit-test.yml
+++ b/.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
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+node-linker=hoisted
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+    trailingComma: "all",
+    tabWidth: 4,
+    semi: true,
+    singleQuote: false,
+};
+
+export default config;
--- a/e2e/BinaryCoStream/CHANGELOG.md
+++ b/e2e/BinaryCoStream/CHANGELOG.md
@@ -1,9 +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
+
 ## 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
--- a/e2e/BinaryCoStream/index.html
+++ b/e2e/BinaryCoStream/index.html
@@ -5,7 +5,7 @@
    <link rel="icon" type="image/png" href="/jazz-logo.png" />
    <link rel="stylesheet" href="/src/index.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz Chat Example</title>
+    <title>Jazz BinaryCoStream Tests</title>
  </head>
  <body>
    <div id="root"></div>
--- a/e2e/BinaryCoStream/package.json
+++ b/e2e/BinaryCoStream/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@jazz-e2e/binarycostream",
  "private": true,
-  "version": "0.0.82",
+  "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.1",
-    "jazz-tools": "workspace:0.8.1",
+    "jazz-react": "workspace:0.8.5",
+    "jazz-tools": "workspace:0.8.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
--- a/e2e/CoValues/.gitignore
+++ b/e2e/CoValues/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+sync-db/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
--- a/e2e/CoValues/CHANGELOG.md
+++ b/e2e/CoValues/CHANGELOG.md
@@ -0,0 +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
--- a/e2e/CoValues/index.html
+++ b/e2e/CoValues/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <link rel="stylesheet" href="/src/index.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz CoValues tests</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/app.tsx"></script>
+  </body>
+</html>
--- a/e2e/CoValues/package.json
+++ b/e2e/CoValues/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@jazz-e2e/covalues",
+  "private": true,
+  "version": "0.0.85",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "lint-staged": {
+    "*.{js,jsx,mdx,json}": "prettier --write"
+  },
+  "dependencies": {
+    "cojson": "workspace:*",
+    "hash-slash": "workspace:*",
+    "is-ci": "^3.0.1",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.46.1",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.2.19",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "jstat": "^1.9.6",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  }
+}
--- a/e2e/CoValues/playwright.config.ts
+++ b/e2e/CoValues/playwright.config.ts
@@ -0,0 +1,49 @@
+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",
+    },
+
+    /* 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,
+});
--- a/e2e/CoValues/src/app.tsx
+++ b/e2e/CoValues/src/app.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { AuthAndJazz } from "./jazz";
+import { TestInput } from "./pages/TestInput";
+import { RouterProvider, createHashRouter } from "react-router-dom";
+
+const router = createHashRouter([
+  {
+      path: "/",
+      element: <TestInput />,
+  },
+  {
+      path: "/test-input",
+      element: <TestInput />,
+  },
+]);
+
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+      <AuthAndJazz>
+          <RouterProvider router={router} />
+      </AuthAndJazz>
+  </React.StrictMode>,
+);
--- a/e2e/CoValues/src/jazz.tsx
+++ b/e2e/CoValues/src/jazz.tsx
@@ -0,0 +1,25 @@
+import { createJazzReactApp } from "jazz-react";
+import { ephemeralCredentialsAuth } from "jazz-tools";
+import { useState } from "react";
+
+const key = `test-comap@jazz.tools`;
+
+const localSync = new URLSearchParams(location.search).has("localSync");
+
+const Jazz = createJazzReactApp();
+
+export const { useAccount, useCoState } = Jazz;
+
+export function AuthAndJazz({ children }: { children: React.ReactNode }) {
+  const [ephemeralAuth] = useState(ephemeralCredentialsAuth())
+
+  return (
+    <Jazz.Provider auth={ephemeralAuth} peer={
+      localSync
+        ? `ws://localhost:4200?key=${key}`
+        : `wss://mesh.jazz.tools/?key=${key}`
+    }>
+      {children}
+    </Jazz.Provider>
+  );
+}
--- a/e2e/CoValues/src/pages/TestInput.tsx
+++ b/e2e/CoValues/src/pages/TestInput.tsx
@@ -0,0 +1,35 @@
+import { co, CoMap, Group, ID } from "jazz-tools";
+import { useAccount, useCoState } from "../jazz";
+import { useEffect, useState } from "react";
+
+export class InputTestCoMap extends CoMap {
+  title = co.string;
+}
+
+export function TestInput() {
+  const [id, setId] = useState<ID<InputTestCoMap> | undefined>(undefined);
+  const coMap = useCoState(InputTestCoMap, id);
+  const { me } = useAccount();
+
+  useEffect(() => {
+    if (!me || id) return;
+
+    const group = Group.create({ owner: me });
+
+    group.addMember("everyone", "writer");
+
+    setId(InputTestCoMap.create({ title: "" }, { owner: group }).id);
+  }, [me]);
+
+  if (!coMap) return null;
+
+  return (
+    <input
+      value={coMap?.title ?? ""}
+      onChange={(e) => {
+        if (!coMap) return;
+        coMap.title = e.target.value;
+      }}
+    />
+  );
+}
--- a/e2e/CoValues/src/vite-env.d.ts
+++ b/e2e/CoValues/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/e2e/CoValues/tests/TestInput.spec.ts
+++ b/e2e/CoValues/tests/TestInput.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("CoMap - TestInput", () => {
+  test("should keep the cursor position when typing", async ({ page }) => {
+    await page.goto("/test-input");
+
+    await page.getByRole("textbox").fill("xx");
+    await page.getByRole('textbox').press('ArrowLeft');
+    await page.getByRole("textbox").press("y");
+    await page.getByRole("textbox").press("y");
+
+    await expect(page.getByRole('textbox')).toHaveValue("xyyx");
+  });
+});
--- a/e2e/CoValues/tsconfig.json
+++ b/e2e/CoValues/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "."
+  },
+  "include": ["src"],
+}
--- a/e2e/CoValues/vite.config.ts
+++ b/e2e/CoValues/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    minify: false
+  }
+})
--- a/examples/book-shelf/.eslintrc.json
+++ b/examples/book-shelf/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error"]
+  }
+}
--- a/examples/book-shelf/.gitignore
+++ b/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
--- a/examples/book-shelf/.prettierrc.json
+++ b/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"]
+}
--- a/examples/book-shelf/CHANGELOG.md
+++ b/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
--- a/examples/book-shelf/Dockerfile
+++ b/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/
--- a/examples/book-shelf/README.md
+++ b/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).
--- a/examples/book-shelf/job-template.nomad
+++ b/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
--- a/examples/book-shelf/next-env.d.ts
+++ b/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.
--- a/examples/book-shelf/next.config.mjs
+++ b/examples/book-shelf/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
--- a/examples/book-shelf/package.json
+++ b/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"
+  }
+}
--- a/examples/book-shelf/postcss.config.mjs
+++ b/examples/book-shelf/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
--- a/examples/book-shelf/src/app/add/page.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/app/book/[slug]/page.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/app/favicon.ico
+++ b/examples/book-shelf/src/app/favicon.ico
--- a/examples/book-shelf/src/app/globals.css
+++ b/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;
+  }
+}
--- a/examples/book-shelf/src/app/layout.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/app/page.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/app/user/[slug]/page.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/BookCover.tsx
+++ b/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} />;
+}
--- a/examples/book-shelf/src/components/BookReviewHeader.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/BookReviewThumbnail.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/Button.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/Container.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/JazzAndAuth.tsx
+++ b/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} />
+      )}
+    </>
+  );
+}
--- a/examples/book-shelf/src/components/Nav.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/Rating.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/RatingInput.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/UserProfile.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/icons/PlusIcon.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/icons/StarIcon.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/components/icons/StarOutlineIcon.tsx
+++ b/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>
+  );
+}
--- a/examples/book-shelf/src/schema.ts
+++ b/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);
+  }
+}
--- a/examples/book-shelf/tailwind.config.ts
+++ b/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;
--- a/examples/book-shelf/tsconfig.json
+++ b/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"]
+}
--- a/examples/chat-clerk/CHANGELOG.md
+++ b/examples/chat-clerk/CHANGELOG.md
@@ -1,5 +1,42 @@
 # 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
+
+- Updated dependencies [a075f90]
+  - jazz-tools@0.8.2
+  - jazz-react@0.8.2
+  - jazz-react-auth-clerk@0.8.2
+
 ## 0.0.81

 ### Patch Changes
--- a/examples/chat-clerk/package.json
+++ b/examples/chat-clerk/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-chat-clerk",
  "private": true,
-  "version": "0.0.81",
+  "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.1",
-    "jazz-react-auth-clerk": "workspace:0.8.1",
-    "jazz-tools": "workspace:0.8.1",
+    "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"
  }
--- a/examples/chat-clerk/src/app.tsx
+++ b/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>} />,
      })}
--- a/examples/chat-rn/.gitignore
+++ b/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
--- a/examples/chat-rn/CHANGELOG.md
+++ b/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
--- a/examples/chat-rn/app.json
+++ b/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"
+  }
+}
--- a/examples/chat-rn/assets/adaptive-icon.png
+++ b/examples/chat-rn/assets/adaptive-icon.png
--- a/examples/chat-rn/assets/favicon.png
+++ b/examples/chat-rn/assets/favicon.png
--- a/examples/chat-rn/assets/icon.png
+++ b/examples/chat-rn/assets/icon.png
--- a/examples/chat-rn/assets/splash.png
+++ b/examples/chat-rn/assets/splash.png
--- a/examples/chat-rn/babel.config.js
+++ b/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",
+        ],
+    };
+};
--- a/examples/chat-rn/eas.json
+++ b/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": {}
+    }
+}
--- a/examples/chat-rn/index.js
+++ b/examples/chat-rn/index.js
@@ -0,0 +1,5 @@
+import "./polyfills";
+import { registerRootComponent } from "expo";
+import App from "./src/App";
+
+registerRootComponent(App);
--- a/examples/chat-rn/metro.config.js
+++ b/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;
--- a/examples/chat-rn/nativewind-env.d.ts
+++ b/examples/chat-rn/nativewind-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />
--- a/examples/chat-rn/package.json
+++ b/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
+}
--- a/examples/chat-rn/polyfills.js
+++ b/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);
--- a/examples/chat-rn/src/App.tsx
+++ b/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;
--- a/examples/chat-rn/src/chat.tsx
+++ b/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>
+    );
+}
--- a/examples/chat-rn/src/invite.tsx
+++ b/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>;
+}
--- a/examples/chat-rn/src/jazz.tsx
+++ b/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;
--- a/examples/chat-rn/src/mmkv-storage.ts
+++ b/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();
+    }
+}
--- a/examples/chat-rn/src/schema.ts
+++ b/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)) {}
--- a/examples/chat-rn/tailwind.config.js
+++ b/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: [],
+};
--- a/examples/chat-rn/tsconfig.json
+++ b/examples/chat-rn/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "moduleResolution": "bundler"
+  },
+  "exclude": [
+    "src/tests"
+  ]
+}
--- a/examples/chat/.gitignore
+++ b/examples/chat/.gitignore
@@ -23,4 +23,9 @@ dist-ssr
 *.sln
 *.sw?

-sync-db/
+sync-db/
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
--- a/examples/chat/CHANGELOG.md
+++ b/examples/chat/CHANGELOG.md
@@ -1,5 +1,40 @@
 # 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
+
+- Updated dependencies [a075f90]
+  - jazz-tools@0.8.2
+  - jazz-react@0.8.2
+
 ## 0.0.83

 ### Patch Changes
--- a/examples/chat/index.html
+++ b/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>
--- a/examples/chat/package.json
+++ b/examples/chat/package.json
@@ -1,14 +1,16 @@
 {
  "name": "jazz-example-chat",
  "private": true,
-  "version": "0.0.83",
+  "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.1",
-    "jazz-tools": "workspace:0.8.1",
+    "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"
  }
--- a/examples/chat/playwright.config.ts
+++ b/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,
+});
--- a/examples/chat/src/app.tsx
+++ b/examples/chat/src/app.tsx
@@ -7,21 +7,22 @@ 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 (
    <AppContainer>
      <TopBar>
-        {me?.profile?.name} · <button onClick={logOut}>Log out</button>
+        <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>} />,
      })}
--- a/examples/chat/src/chatScreen.tsx
+++ b/examples/chat/src/chatScreen.tsx
@@ -5,29 +5,44 @@ import {
  BubbleBody,
  BubbleContainer,
  BubbleInfo,
-  ChatContainer,
+  ChatBody,
  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 ? (
-    <ChatContainer>
-      {chat.length > 0 ? (
-        chat.map(msg => <ChatBubble msg={msg} key={msg.id} />)
-      ) : (
-        <EmptyChatMessage />
-      )}
+    <>
+      <ChatBody>
+        {chat.length > 0 ? (
+          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 => {
          chat.push(Message.create({ text }, { owner: chat._owner }));
        }}
      />
-    </ChatContainer>
+    </>
  ) : (
-    <div>Loading...</div>
+    <div className="flex-1 flex justify-center items-center">Loading...</div>
  );
 }

--- a/examples/chat/src/main.tsx
+++ b/examples/chat/src/main.tsx
@@ -9,8 +9,6 @@ export const { useAccount, useCoState } = Jazz;
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
  const [auth, state] = useDemoAuth();

-  console.log(state, auth)
-
  return (
    <>
      <Jazz.Provider
@@ -19,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} />
+      }
    </>
  );
 }
--- a/examples/chat/src/ui.tsx
+++ b/examples/chat/src/ui.tsx
@@ -1,6 +1,8 @@
+import { useId } from "react";
+
 export function AppContainer(props: { children: React.ReactNode }) {
  return (
-    <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
+    <div className="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-black dark:text-white">
      {props.children}
    </div>
  );
@@ -8,20 +10,22 @@ export function AppContainer(props: { children: React.ReactNode }) {

 export function TopBar(props: { children: React.ReactNode }) {
  return (
-    <div className="mb-5 px-2 py-1 text-sm self-end">{props.children}</div>
+    <div className="p-3 bg-white w-full flex justify-end gap-1 text-xs border-b dark:bg-transparent dark:border-stone-800">
+      {props.children}
+    </div>
  );
 }

-export function ChatContainer(props: { children: React.ReactNode }) {
+export function ChatBody(props: { children: React.ReactNode }) {
  return (
-    <div className="w-full max-w-xl h-full flex flex-col items-stretch">
+    <div className="flex-1 overflow-y-auto flex flex-col-reverse" role="application">
      {props.children}
    </div>
  );
 }

 export function EmptyChatMessage() {
-  return <div className="m-auto text-sm">(Empty chat)</div>;
+  return <div className="h-full text-base text-stone-500 flex items-center justify-center px-3 md:text-xl">Start a conversation below.</div>;
 }

 export function BubbleContainer(props: {
@@ -29,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`}>{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-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]">
+    <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>
  );
@@ -42,22 +46,29 @@ export function BubbleBody(props: { children: React.ReactNode }) {

 export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
  return (
-    <div className="text-xs text-neutral-500 ml-2">
-      {props.by} {props.madeAt.toLocaleTimeString()}
+    <div className="text-xs text-neutral-500 mt-1.5">
+      {props.by} · {props.madeAt.toLocaleTimeString()}
    </div>
  );
 }

 export function ChatInput(props: { onSubmit: (text: string) => void }) {
+  const inputId = useId();
+
  return (
-    <input
-      className="rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 dark:border-stone-700"
-      placeholder="Type a message and press Enter"
-      onKeyDown={({ key, currentTarget: input }) => {
-        if (key !== "Enter" || !input.value) return;
-        props.onSubmit(input.value);
-        input.value = "";
-      }}
-    />
+    <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);
+          input.value = "";
+        }}
+      />
+    </div>
  );
 }
--- a/examples/chat/tailwind.config.js
+++ b/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")],
--- a/examples/chat/tests/chat.spec.ts
+++ b/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);
+});
--- a/examples/chat/tests/pages/ChatPage.ts
+++ b/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("/");
+  }
+}
--- a/examples/chat/tests/pages/LoginPage.ts
+++ b/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();
+    }
+}
--- a/examples/inspector/CHANGELOG.md
+++ b/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
--- a/examples/inspector/package.json
+++ b/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"
  }
--- a/examples/inspector/src/viewer/co-stream-view.tsx
+++ b/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
--- a/examples/inspector/src/viewer/grid-view.tsx
+++ b/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";
--- a/examples/inspector/src/viewer/table-viewer.tsx
+++ b/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";
--- a/examples/music-player/CHANGELOG.md
+++ b/examples/music-player/CHANGELOG.md
@@ -1,5 +1,29 @@
 # 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
+
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-react@0.8.2
+
 ## 0.0.4

 ### Patch Changes
--- a/examples/music-player/README.md
+++ b/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:

--- a/examples/music-player/components.json
+++ b/examples/music-player/components.json
@@ -10,7 +10,7 @@
    "cssVariables": true
  },
  "aliases": {
-    "components": "@/basicComponents",
-    "utils": "@/basicComponents/lib/utils"
+    "components": "@/components",
+    "utils": "@/lib/utils"
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Anselm	99565ed03a	Release	2024-10-09 17:34:10 +01:00
Anselm Eickhoff	1d3b9f9152	Merge pull request #469 from gardencmp/trishalim-jazz-342 Add book shelf example	2024-10-09 17:30:41 +01:00
Anselm	c3f4e6baec	Add changeset for package export order changes	2024-10-09 17:30:10 +01:00
Anselm Eickhoff	7f0d24b113	Merge pull request #516 from gardencmp/anselm-jazz-371 Make feature copy more succinct	2024-10-09 17:26:36 +01:00
Anselm	52a649a352	Revert 2nd paragraph in local-first storage	2024-10-09 17:25:51 +01:00
Anselm	d4a89c4328	Shorten and clean up feature section	2024-10-09 17:06:04 +01:00
Trisha Lim	b15a295a73	Update lock file, fix error "Default condition should be last one"	2024-10-09 12:12:13 +01:00
Trisha Lim	fe384dfff6	Add book shelf example	2024-10-09 11:48:59 +01:00
Anselm Eickhoff	863eb73ad1	Merge pull request #484 from gardencmp/feature/chat-e2e test: add basic e2e tests for the chat app	2024-10-09 10:55:09 +01:00
Anselm Eickhoff	5a41a9e7b9	Merge pull request #464 from gardencmp/feature/music-remake feat: ui refresh for the music player	2024-10-09 10:50:52 +01:00
Anselm Eickhoff	f89e2772bc	Fix expected Sign up button label	2024-10-09 10:49:09 +01:00
Anselm Eickhoff	7ca45c4a24	Merge pull request #494 from gardencmp/turbo-config-changes Add build task as dependency for dev and test	2024-10-09 10:45:12 +01:00
Anselm Eickhoff	b4449b92bb	Merge branch 'main' into feature/chat-e2e	2024-10-09 10:41:42 +01:00
Guido D'Orsi	10738a7c3d	chore: update pkg	2024-10-09 11:41:17 +02:00
Anselm Eickhoff	08fdb0316a	Merge pull request #492 from gardencmp/feature/co-json-types fix(co.json): allow interface types as generic argument	2024-10-09 10:41:06 +01:00
Guido D'Orsi	6ebc5967f4	Merge remote-tracking branch 'origin/main' into feature/music-remake	2024-10-09 11:40:26 +02:00
Anselm	11a3da61e1	Fix jazz-run dev dep in chat example	2024-10-09 10:39:18 +01:00
Anselm Eickhoff	ef1592dbee	Merge pull request #513 from gardencmp/test/pets-with-local-sync test(pets): run tests using local sync	2024-10-09 10:35:44 +01:00
Anselm	d9152ed556	Add changeset	2024-10-09 10:31:38 +01:00
Anselm	509c8fad3f	Merge branch 'main' into feature/co-json-types	2024-10-09 10:30:28 +01:00
Anselm Eickhoff	19b4f6d21d	Merge pull request #510 from gardencmp/trishalim-jazz-370 Rename mesh to "Jazz Mesh", move section higher in the home page	2024-10-09 10:26:47 +01:00
Anselm	d705ef7e14	Release jazz-run	2024-10-09 10:19:36 +01:00
Guido D'Orsi	b99cc2a665	test(pets): run tests using local sync	2024-10-09 11:01:13 +02:00
Anselm Eickhoff	4e6e87aadd	Merge pull request #512 from gardencmp/fix/jazz-run	2024-10-09 08:44:35 +01:00
Guido D'Orsi	561924f18f	fix(jazz-run): fix broken import	2024-10-09 09:40:53 +02:00
Trisha Lim	80d5c32405	Update Jazz Mesh subheading	2024-10-08 18:04:12 +01:00
Trisha Lim	4b33a13758	Move Jazz Mesh section up the home page	2024-10-08 18:01:18 +01:00
Trisha Lim	8878c1eebd	Fix home page spacing	2024-10-08 17:55:55 +01:00
Trisha Lim	c10ad968f9	Change "ours" to "Jazz Mesh" in diagram	2024-10-08 17:53:42 +01:00
Trisha Lim	a19b817818	Rename "Sync & Storage Mesh" to "Jazz Mesh"	2024-10-08 17:53:26 +01:00
Anselm Eickhoff	7192b142a3	Merge pull request #509 from gardencmp/fix/feature-section-layout	2024-10-08 17:19:09 +01:00
Trisha Lim	fc34a18934	Fix layout in homepage feature section	2024-10-08 17:08:40 +01:00
Anselm Eickhoff	d7ce6fa254	Merge branch 'main' into feature/co-json-types	2024-10-08 17:01:00 +01:00
Anselm Eickhoff	ed94e2ca2c	Merge pull request #453 from gardencmp/trishalim-jazz-336 Fix scroll issue on chat example app if there are many users	2024-10-08 16:46:08 +01:00
Anselm Eickhoff	0c6e05e7ab	Merge pull request #483 from gardencmp/trishalim-jazz-354 Make example code in package API reference readable	2024-10-08 16:44:21 +01:00
Anselm Eickhoff	a6e966438b	Merge branch 'main' into trishalim-jazz-354	2024-10-08 16:39:07 +01:00
Anselm Eickhoff	f668bc05f2	Merge pull request #476 from davidvasandani/patch-1 fix: path issues	2024-10-08 16:37:31 +01:00
Anselm Eickhoff	4d95f8ea8e	Merge pull request #477 from gardencmp/trishalim-jazz-348 Add copy button for code snippets	2024-10-08 16:37:05 +01:00
Anselm Eickhoff	9172558481	Merge pull request #508 from gardencmp/remove-top-cta Remove top-level CTA buttons	2024-10-08 16:36:25 +01:00
Trisha Lim	fbdf091dd8	Remove top-level CTA buttons	2024-10-08 16:32:02 +01:00
Anselm Eickhoff	16c4fad514	Merge pull request #449 from gardencmp/trishalim-jazz-287 Homepage: redesign hero, add diagrams	2024-10-08 16:27:25 +01:00
Anselm	6e7591ab38	Last copy changes	2024-10-08 16:21:05 +01:00
Anselm	a85875bc53	Fix lint issues	2024-10-08 15:15:58 +01:00
Anselm	e1b25750b9	New feature copy	2024-10-08 15:06:17 +01:00
Anselm Eickhoff	eae6c27566	Merge pull request #497 from gardencmp/467-create-codate-shortcut Add co.Date and update test	2024-10-08 14:31:22 +01:00
Anselm	f66079ea22	Fix lockfile	2024-10-08 12:18:49 +01:00
Anselm Eickhoff	2a35761401	Merge pull request #503 from gardencmp/fix/chat-height Wrap text in chat message	2024-10-08 13:17:41 +02:00
Anselm	103a82075d	Parent-frame friendlier navigation	2024-10-08 12:16:08 +01:00
Anselm	e85ab79026	Manually trigger hashchange event for now	2024-10-08 12:06:57 +01:00
Anselm	5f3680e749	Manually trigger hashchange for now	2024-10-08 12:06:27 +01:00
Trisha Lim	5956217b41	Revert "Fix: can't find input box in mobile til scrolling down" This reverts commit `7295abeac5`.	2024-10-08 12:02:41 +01:00
Anselm	03c0d81ca1	Stop chat example from creating history entries	2024-10-08 12:00:44 +01:00
Trisha Lim	0d53f378a0	Wrap text in chat app	2024-10-08 11:46:54 +01:00
Anselm	428ec8c170	Limit number of messages and scroll to bottom	2024-10-08 11:31:50 +01:00
Anselm Eickhoff	4cc442babc	Merge pull request #500 from gardencmp/trishalim-jazz-365 Set 2048 character limit per message to chat app	2024-10-08 12:13:29 +02:00
Anselm Eickhoff	1f9b94c0c7	Apply suggestions from code review Let's clamp to 10 lines	2024-10-08 11:11:27 +01:00
Trisha Lim	4c9d2b5a41	Limit chat messages to display 20 lines max	2024-10-08 11:08:11 +01:00
Trisha Lim	183e384819	Center align loading text in chat app	2024-10-08 11:08:11 +01:00
Trisha Lim	7295abeac5	Fix: can't find input box in mobile til scrolling down	2024-10-08 11:08:11 +01:00
Trisha Lim	77f1351000	Set 2048 character limit per message to chat app	2024-10-08 11:00:15 +01:00
Anselm Eickhoff	ba3e09a2a0	Merge pull request #501 from gardencmp/fix/chat-crash fix(localNode): do not crash the app when we fail to resolve the account agent	2024-10-08 11:59:38 +02:00
Guido D'Orsi	21890eb99d	fix(localNode): do not crash the app when we fail to resolve the account agent	2024-10-08 11:55:15 +02:00
Guido D'Orsi	489de02696	chore: update lockfile	2024-10-08 11:54:38 +02:00
Guido D'Orsi	4c3be94376	chore: update lockfile	2024-10-07 19:30:47 +02:00
Benjamin S. Leveritt	37180974a8	chore: update pnpm lock	2024-10-07 17:43:35 +01:00
Benjamin S. Leveritt	8cf1aa5ac4	Add co.Date and update test	2024-10-07 17:30:26 +01:00
Guido D'Orsi	7aee91eb83	fix(co.json): accept optional types	2024-10-07 16:38:55 +02:00
Guido D'Orsi	8890c84d39	fix(co.json): accept types with optional parameters	2024-10-07 16:38:55 +02:00
Guido D'Orsi	2b301c723b	chore(jsonValue): fix typo in a comment	2024-10-07 16:38:55 +02:00
Guido D'Orsi	6e7f4facbd	fix(co.json): allow nested interface types	2024-10-07 16:38:55 +02:00
Guido D'Orsi	a2ec72eab2	fix(co.json): disallow functions and Regexp	2024-10-07 16:38:55 +02:00
Guido D'Orsi	7ac660820f	fix(co.json): allow interface types as generic argument	2024-10-07 16:38:55 +02:00
Anselm	a8d33d14c8	Release	2024-10-07 15:20:11 +01:00
Benjamin S. Leveritt	72c33640f6	Add build task as dependency for dev and test	2024-10-07 15:16:06 +01:00
Anselm Eickhoff	fd21db18fc	Merge pull request #471 from gardencmp/JAZZ-314/react-native-proof-of-concept React Native Support	2024-10-07 16:08:33 +02:00
Trisha Lim	92e9ea50d4	Fix scroll issue on chat example app if there are many users	2024-10-07 14:55:18 +01:00
Trisha Lim	d1c4f16df0	Change "Sign up as new account" to "Sign up"	2024-10-07 14:44:41 +01:00
pax-k	738940a634	fix: sherif lint - pin dependencies versions	2024-10-07 16:35:11 +03:00
pax-k	a0d3dcafdc	chore: lint issues	2024-10-07 16:22:05 +03:00
pax-k	9bae5569de	chore: pnpm lock	2024-10-07 16:18:44 +03:00
pax-k	6f6fcf25e7	Merge branch 'main' into JAZZ-314/react-native-proof-of-concept	2024-10-07 16:17:27 +03:00
pax-k	430cf732a6	fix: temporary skipErrorChecking for jazz-react in genDocs	2024-10-07 16:15:43 +03:00
pax-k	9851227258	chore: use the same typescript version across packages	2024-10-07 16:00:16 +03:00
pax-k	3c302cb675	fix(react-native): handle duplicate usernames by appending incremental suffix	2024-10-07 15:47:25 +03:00
pax-k	0fb11b4f98	fix(react-native): native chat UI	2024-10-07 15:46:28 +03:00
pax-k	cee3750f2e	fix(react-native): polyfils	2024-10-07 15:46:00 +03:00
pax-k	140c5fc928	fix(react-native): polyfils	2024-10-07 15:45:42 +03:00
pax	fd331a5692	Merge pull request #488 from tobiaslins/improve-chat-ui-rn First iteration of improved chat ui	2024-10-07 12:21:51 +03:00
Tobias Lins	7c12a16ad4	First iteration of chat ui	2024-10-06 21:18:16 +02:00
Guido D'Orsi	079963fb47	chore(chat): add a sr-only label to the message box	2024-10-06 11:35:39 +02:00
Guido D'Orsi	82f0ebaf6f	test: add basic e2e tests for the chat app	2024-10-04 19:28:22 +02:00
Trisha Lim	3772ef9645	Don't wrap code in the middle of paragraph	2024-10-04 17:18:24 +01:00
Trisha Lim	0e67bdccfc	Fix spacing in mobile menu hamburger icon	2024-10-04 17:13:42 +01:00
Trisha Lim	39e33f4fac	Make example code in package API reference readable	2024-10-04 17:13:42 +01:00
pax-k	358dec2e09	feat(react-native): chat demo to handle invite links (wip)	2024-10-03 22:46:23 +03:00
pax-k	b76b9aa267	feat(react-native): added support for handling invite deep links	2024-10-03 22:45:49 +03:00
Trisha Lim	f2f10c58d7	Add copy button for code snippets	2024-10-02 20:43:05 +01:00
David Vasandani	3d77fff140	fix: path issues	2024-10-02 09:50:11 -07:00
pax-k	9cb111373b	fix(react-native): added native kv storage support	2024-10-02 17:46:13 +03:00
pax-k	e07fb36c26	fix(react-native): implement network connectivity logic	2024-10-02 14:58:29 +03:00
Anselm Eickhoff	79bb915b43	Merge pull request #473 from gardencmp/trishalim-jazz-321 Remove empty space in code example tab	2024-10-02 09:38:40 +01:00
Trisha Lim	9926c485e7	Remove empty space in code example tab	2024-10-01 21:03:08 +01:00
Guido D'Orsi	abbda85c16	feat: clean up unused files and optimize subscriptions	2024-10-01 19:42:38 +02:00
pax-k	d77fb9db0c	chore(react-native): cleanup	2024-10-01 20:10:09 +03:00
pax-k	595b1c71b4	feat(rn-poc): implementing react-native support	2024-10-01 19:30:13 +03:00
Guido D'Orsi	625ddd5db9	feat: ui refresh for the music player	2024-10-01 16:30:05 +02:00
Trisha Lim	9e1fa1adc6	Update illustration copy to be lowercase	2024-10-01 11:33:10 +01:00
Anselm	d87c081055	Fix lockfile	2024-10-01 10:40:25 +01:00
Anselm	f224b2b4ea	Release	2024-10-01 10:11:26 +01:00
Anselm Eickhoff	f70d34fb0b	Merge pull request #462 from gardencmp/gudorsi-jazz-173 changeset for the cursor fix	2024-10-01 10:09:49 +01:00
Guido D'Orsi	a075f90890	changeset	2024-10-01 11:08:36 +02:00
Anselm Eickhoff	66686e4f71	Merge pull request #461 from gardencmp/gudorsi-jazz-173 fix(jazz-react): fix cursor reset on text input updates	2024-10-01 10:07:34 +01:00
Anselm Eickhoff	e8a6f9d123	Merge pull request #460 from gardencmp/feature/text-cursor-position-test test(CoMap): add a failing test to check the cursor position while editing text inputs	2024-10-01 10:06:44 +01:00
Trisha Lim	9246c009b8	Add example apps to docs (#456 ) * Add example apps to docs	2024-10-01 09:58:25 +01:00
Guido D'Orsi	afa43dc248	fix(jazz-react): fix cursor reset on text input updates	2024-09-30 19:27:54 +02:00
Guido D'Orsi	effa15082e	test(CoMap): add a failing test to check the cursor position while editing text inputs	2024-09-30 19:27:27 +02:00
pax-k	958f534a16	Merge branch 'main' into JAZZ-314/react-native-proof-of-concept	2024-09-30 16:56:02 +03:00
Anselm Eickhoff	2a648a620c	Merge pull request #459 from gardencmp/fix-tests Fix tests	2024-09-30 14:52:52 +01:00
pax-k	f10d13be3b	fix: tests	2024-09-30 16:49:31 +03:00
Anselm Eickhoff	e8f7e90220	Merge pull request #454 from gardencmp/trishalim-jazz-334 Add api-reference page listing packages and descriptions	2024-09-30 11:23:03 +01:00
Trisha Lim	6bf16fd52c	Add api-reference page listing packages and descriptions	2024-09-27 14:41:54 +01:00
Trisha Lim	f290f7716e	Fix logo not center aligned	2024-09-27 12:48:11 +01:00
Trisha Lim	3a83fdf005	Button hover styles	2024-09-26 19:06:42 +01:00
Trisha Lim	88ca9fe406	Make arrow more subtle	2024-09-26 19:06:42 +01:00
Trisha Lim	00e5847fbe	Add CTA buttons to bottom of home page	2024-09-26 19:06:42 +01:00
Trisha Lim	7d54bc8cdd	Add button component	2024-09-26 19:06:42 +01:00
Trisha Lim	b684ca1fd6	Add diagram for light mode	2024-09-26 19:06:42 +01:00
Trisha Lim	3c934e97ac	Add diagram to homepage, rewrite copy	2024-09-26 19:06:42 +01:00
Anselm Eickhoff	f143a4aa4d	Merge pull request #451 from gardencmp/trishalim-jazz-337 Set blue (primary) color palette	2024-09-26 10:50:09 -07:00
Trisha Lim	0c07fcee1c	Set blue (primary) color palette	2024-09-26 18:01:06 +01:00
Anselm Eickhoff	eca9698bbc	Merge pull request #448 from gardencmp/trishalim-jazz-320 Improve styling for code snippets	2024-09-25 08:46:40 -07:00
Trisha Lim	de66d90b85	Styling for removed line in code snippet	2024-09-25 16:16:55 +01:00
Trisha Lim	4bc815a576	Improve styling for code snippets	2024-09-25 14:30:19 +01:00
Anselm Eickhoff	0bd4fea0dd	Merge pull request #444 from gardencmp/trishalim-jazz-307 Emphasize invite link to join chat in chat example	2024-09-24 13:01:57 -07:00
Trisha Lim	35c310dc47	Add "copy url to invite" button	2024-09-24 19:53:04 +01:00
Trisha Lim	f80442793a	Switch to url field	2024-09-24 19:17:44 +01:00
Anselm Eickhoff	98be05f697	Merge pull request #441 from gardencmp/anselm-jazz-332 Finish Guide	2024-09-24 11:13:39 -07:00
Trisha Lim	0b6e9e6c4d	Dark mode styling for homepage chat example	2024-09-24 18:59:49 +01:00
Trisha Lim	45046f571f	Mobile view for homepage chat example	2024-09-24 18:36:11 +01:00
Trisha Lim	4ccad8ac0b	Add invite link	2024-09-24 18:17:46 +01:00
Anselm	e4d68bb56b	Heading structure for Groups & Permissions	2024-09-24 10:02:27 -07:00
Anselm	ab7c560fbb	Merge branch 'main' into anselm-jazz-332	2024-09-24 09:48:55 -07:00
Anselm Eickhoff	32c820be56	Merge pull request #440 from gardencmp/trishalim-jazz-322 Redesign UI of docs side nav	2024-09-24 09:43:30 -07:00
Anselm	f5d7c9fd6b	Fix details marker on Safari	2024-09-24 09:36:59 -07:00
Anselm	6b90c6048b	New intro	2024-09-24 09:29:52 -07:00
Trisha Lim	80bb793e3a	Scroll chat body only, not whole screen	2024-09-24 15:56:09 +01:00
Trisha Lim	b275ffbe01	Redesign code example section	2024-09-24 15:43:37 +01:00
Trisha Lim	49f60bda67	Minimal UI improvements to chat example	2024-09-24 15:19:03 +01:00
Trisha Lim	8b52f180af	Get design system app running	2024-09-24 13:47:33 +01:00
Trisha Lim	46365a35fe	Redesign UI of docs side nav	2024-09-24 13:46:53 +01:00
Anselm	ac9dab0b3b	Group explanation and half of invitation flow	2024-09-23 12:30:56 -07:00
Anselm	9b1227915e	Comment out TODOs	2024-09-23 11:34:38 -07:00
Anselm	dbb024e4da	Reshuffle headings	2024-09-23 11:34:18 -07:00
pax-k	15356960e9	chore: react-native scaffolding (wip)	2024-09-23 12:52:48 +03:00