Merge pull request #914 from garden-co/changeset-release/main

Version Packages

.github/workflows/build-examples.yaml

@@ -17,6 +17,7 @@ jobs:
           "music-player",
           "password-manager",
           "pets",
+          "reactions",
           "todo",
           "onboarding",
         ]

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/chat", "examples/music-player", "examples/pets", "examples/onboarding"]
+        project: ["tests/e2e", "examples/chat", "examples/music-player", "examples/pets", "examples/onboarding"]
 
     steps:
       - uses: actions/checkout@v3

biome.json

@@ -7,7 +7,13 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["jazz-tools.json", "**/ios/**", "**/android/**"]
+    "ignore": [
+      "jazz-tools.json",
+      "**/ios/**",
+      "**/android/**",
+      "packages/jazz-svelte/**",
+      "examples/*svelte*/**"
+    ]
   },
   "formatter": {
     "enabled": true,

e2e/BinaryCoStream/CHANGELOG.md

@@ -1,260 +0,0 @@
-# @jazz-e2e/binarycostream
-
-## 0.0.111
-
-### Patch Changes
-
-- Updated dependencies [e4f110f]
-  - cojson@0.8.34
-  - jazz-react@0.8.34
-  - jazz-tools@0.8.34
-
-## 0.0.110
-
-### Patch Changes
-
-- jazz-react@0.8.33
-
-## 0.0.109
-
-### Patch Changes
-
-- Updated dependencies [df42b2b]
-- Updated dependencies [df42b2b]
-  - cojson@0.8.32
-  - jazz-tools@0.8.32
-  - jazz-react@0.8.32
-
-## 0.0.108
-
-### Patch Changes
-
-- Updated dependencies [e511d6d]
-  - cojson@0.8.31
-  - jazz-react@0.8.31
-  - jazz-tools@0.8.31
-
-## 0.0.107
-
-### Patch Changes
-
-- Updated dependencies [0a2fae3]
-- Updated dependencies [99cda2f]
-  - cojson@0.8.30
-  - jazz-react@0.8.30
-  - jazz-tools@0.8.30
-
-## 0.0.106
-
-### Patch Changes
-
-- Updated dependencies [dcc9c2e]
-- Updated dependencies [699553f]
-  - cojson@0.8.29
-  - jazz-react@0.8.29
-  - jazz-tools@0.8.29
-
-## 0.0.105
-
-### Patch Changes
-
-- Updated dependencies [605734c]
-  - cojson@0.8.28
-  - jazz-react@0.8.28
-  - jazz-tools@0.8.28
-
-## 0.0.104
-
-### Patch Changes
-
-- Updated dependencies [75fdff4]
-  - cojson@0.8.27
-  - jazz-react@0.8.27
-  - jazz-tools@0.8.27
-
-## 0.0.103
-
-### Patch Changes
-
-- Updated dependencies [59d37df]
-  - jazz-react@0.8.26
-
-## 0.0.102
-
-### Patch Changes
-
-- jazz-react@0.8.24
-
-## 0.0.101
-
-### Patch Changes
-
-- Updated dependencies [6f745be]
-- Updated dependencies [d348c2d]
-- Updated dependencies [124bf67]
-- Updated dependencies [6902b5b]
-- Updated dependencies [1a0cd3d]
-  - cojson@0.8.23
-  - jazz-tools@0.8.23
-  - jazz-react@0.8.23
-
-## 0.0.100
-
-### Patch Changes
-
-- Updated dependencies [59cc64d]
-  - jazz-react@0.8.22
-
-## 0.0.99
-
-### Patch Changes
-
-- Updated dependencies [0f30eea]
-- Updated dependencies [149ca97]
-  - cojson@0.8.21
-  - jazz-tools@0.8.21
-  - jazz-react@0.8.21
-
-## 0.0.98
-
-### Patch Changes
-
-- Updated dependencies [dd9b13f]
-- Updated dependencies [a69ed0b]
-- Updated dependencies [3ef3ff3]
-- Updated dependencies [c6931b8]
-  - jazz-react@0.8.20
-
-## 0.0.97
-
-### Patch Changes
-
-- Updated dependencies [9c2aadb]
-  - cojson@0.8.19
-  - jazz-react@0.8.19
-  - jazz-tools@0.8.19
-
-## 0.0.96
-
-### Patch Changes
-
-- Updated dependencies [d4319d8]
-  - cojson@0.8.18
-  - jazz-react@0.8.18
-  - jazz-tools@0.8.18
-
-## 0.0.95
-
-### Patch Changes
-
-- Updated dependencies [d433cf4]
-  - cojson@0.8.17
-  - jazz-react@0.8.17
-  - jazz-tools@0.8.17
-
-## 0.0.94
-
-### Patch Changes
-
-- Updated dependencies [2af107c]
-- Updated dependencies [b934fab]
-  - jazz-react@0.8.16
-  - cojson@0.8.16
-  - jazz-tools@0.8.16
-
-## 0.0.93
-
-### Patch Changes
-
-- Updated dependencies [cce679b]
-  - jazz-tools@0.8.15
-  - jazz-react@0.8.15
-
-## 0.0.92
-
-### Patch Changes
-
-- Updated dependencies [36273b3]
-  - jazz-tools@0.8.14
-  - jazz-react@0.8.14
-
-## 0.0.91
-
-### Patch Changes
-
-- Updated dependencies [fd011d7]
-  - jazz-tools@0.8.13
-  - jazz-react@0.8.13
-
-## 0.0.90
-
-### Patch Changes
-
-- Updated dependencies [6ed75eb]
-- Updated dependencies [3cc6aee]
-  - cojson@0.8.12
-  - jazz-react@0.8.12
-  - jazz-tools@0.8.12
-
-## 0.0.89
-
-### Patch Changes
-
-- Updated dependencies [1ed4ab5]
-  - cojson@0.8.11
-  - jazz-react@0.8.11
-  - jazz-tools@0.8.11
-
-## 0.0.88
-
-### Patch Changes
-
-- jazz-react@0.8.7
-
-## 0.0.87
-
-### Patch Changes
-
-- jazz-react@0.8.6
-
-## 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

e2e/BinaryCoStream/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "@jazz-e2e/filestream",
-  "private": true,
-  "version": "0.0.111",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui"
-  },
-  "dependencies": {
-    "cojson": "workspace:0.8.34",
-    "hash-slash": "workspace:0.2.1",
-    "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.34",
-    "jazz-tools": "workspace:0.8.34",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.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",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
-  }
-}

e2e/BinaryCoStream/src/app.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { DownloaderPeer } from "./DownloaderPeer";
-import { UploaderPeer } from "./UploaderPeer";
-import { AuthAndJazz } from "./jazz";
-import { getValueId } from "./lib/searchParams";
-
-function Main() {
-  const valueId = getValueId();
-
-  if (valueId) {
-    return <DownloaderPeer testCoMapId={valueId} />;
-  }
-
-  return <UploaderPeer />;
-}
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthAndJazz>
-      <Main />
-    </AuthAndJazz>
-  </React.StrictMode>,
-);

e2e/BinaryCoStream/src/jazz.tsx

@@ -1,39 +0,0 @@
-import { createJazzReactApp, useDemoAuth } from "jazz-react";
-import { useEffect, useRef } from "react";
-import { getValueId } from "./lib/searchParams";
-
-const key = getValueId()
-  ? `downloader-e2e@jazz.tools`
-  : `uploader-e2e@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 [auth, state] = useDemoAuth();
-
-  const signedUp = useRef(false);
-
-  useEffect(() => {
-    if (state.state === "ready" && !signedUp.current) {
-      state.signUp("Mister X");
-      signedUp.current = true;
-    }
-  }, [state.state]);
-
-  return (
-    <Jazz.Provider
-      auth={auth}
-      peer={
-        localSync
-          ? `ws://localhost:4200?key=${key}`
-          : `wss://cloud.jazz.tools/?key=${key}`
-      }
-    >
-      {children}
-    </Jazz.Provider>
-  );
-}

e2e/CoValues/playwright.config.ts

@@ -1,53 +0,0 @@
-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: "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: [
-    {
-      command: "pnpm preview --port 5173",
-      url: "http://localhost:5173/",
-      reuseExistingServer: !isCI,
-    },
-  ],
-});

e2e/CoValues/src/app.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import { AuthAndJazz } from "./jazz";
-import { ResumeSyncState } from "./pages/ResumeSyncState";
-import { RetryUnavailable } from "./pages/RetryUnavailable";
-import { TestInput } from "./pages/TestInput";
-
-const router = createBrowserRouter([
-  {
-    path: "/test-input",
-    element: <TestInput />,
-  },
-  {
-    path: "/resume-sync",
-    element: <ResumeSyncState />,
-  },
-  {
-    path: "/retry-unavailable",
-    element: <RetryUnavailable />,
-  },
-  {
-    path: "/",
-    element: <TestInput />,
-  },
-]);
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthAndJazz>
-      <RouterProvider router={router} />
-    </AuthAndJazz>
-  </React.StrictMode>,
-);

e2e/CoValues/vite.config.ts

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

examples/book-shelf/CHANGELOG.md

@@ -1,5 +1,15 @@
 # jazz-example-book-shelf
 
+## 0.1.27
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+  - jazz-browser-media-images@0.8.35
+
 ## 0.1.26
 
 ### Patch Changes

examples/book-shelf/README.md

@@ -1,33 +1,30 @@
-# Jazz Book Shelf Example
+# Book shelf example with Jazz and Next.js
 
-Live version: [https://books-demo.jazz.tools](https://books-demo.jazz.tools)
+This is an example of a book shelf where you can add and review books.
+It shows you how to create and edit data, upload images, and share data publicly.
+
+Live version: https://books-demo.jazz.tools
 
 ## Installing & running the example locally
 
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
-
-Start by checking out `jazz`
-
-Install dependencies:
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
 ```bash
-pnpm install
+npx degit gardencmp/jazz jazz
 ```
 
-Go to the `examples/book-shelf` directory.
-
+Go to the book-shelf example directory:
 ```bash
-cd examples/book-shelf
+cd jazz/examples/book-shelf
 ```
 
-Install dependencies:
-
+Install and build dependencies:
 ```bash
-pnpm install
+pnpm i && npx turbo build
 ```
 
 Start the dev server:
-
 ```bash
 pnpm dev
 ```
@@ -36,8 +33,9 @@ pnpm dev
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
 
+
 ## Configuration: sync server
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/components/JazzAndAuth.tsx](./src/2_main.tsx).
+You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/components/JazzAndAuth.tsx](./src/components/JazzAndAuth.tsx).

examples/book-shelf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-example-book-shelf",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.34",
-    "jazz-react": "workspace:0.8.34",
-    "jazz-tools": "workspace:0.8.34",
+    "jazz-browser-media-images": "workspace:0.8.35",
+    "jazz-react": "workspace:0.8.35",
+    "jazz-tools": "workspace:0.8.35",
     "next": "14.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,15 @@
 # chat-rn-clerk
 
+## 1.0.27
+
+### Patch Changes
+
+- Updated dependencies [8b87117]
+  - jazz-tools@0.8.35
+  - jazz-react-auth-clerk@0.8.35
+  - jazz-react-native@0.8.35
+  - jazz-react-native-media-images@0.8.26
+
 ## 1.0.26
 
 ### Patch Changes

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat-rn
 
+## 1.0.25
+
+### Patch Changes
+
+- Updated dependencies [8b87117]
+  - jazz-tools@0.8.35
+  - jazz-react-native@0.8.35
+
 ## 1.0.24
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,14 @@
 # chat-vue
 
+## 0.0.18
+
+### Patch Changes
+
+- Updated dependencies [8b87117]
+  - jazz-tools@0.8.35
+  - jazz-browser@0.8.35
+  - jazz-vue@0.8.23
+
 ## 0.0.17
 
 ### Patch Changes

examples/chat-vue/README.md

@@ -1,39 +1,35 @@
-# chat-vue
+# Chat example with Jazz and Vue
 
-This template should help get you started developing with Vue 3 in Vite.
+## Installing & running the example locally
 
-## Recommended IDE Setup
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-pnpm install
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+```bash
+npx degit gardencmp/jazz jazz
 ```
 
-### Compile and Hot-Reload for Development
+Go to the todo-vue example directory:
+```bash
+cd jazz/examples/chat-vue
+```
 
-```sh
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
+```
+
+Start the dev server:
+```bash
 pnpm dev
 ```
 
-### Type-Check, Compile and Minify for Production
+## Questions / problems / feedback
 
-```sh
-pnpm build
-```
+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.
 
-### Lint with [ESLint](https://eslint.org/)
+## Configuration: sync server
 
-```sh
-pnpm lint
-```
+By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` in [./src/main.ts](./src/main.ts).

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "private": true,
   "type": "module",
   "scripts": {

examples/chat/CHANGELOG.md

@@ -1,5 +1,18 @@
 # jazz-example-chat
 
+## 0.0.113
+
+### Patch Changes
+
+- Updated dependencies [3f15a23]
+- Updated dependencies [9212ab8]
+- Updated dependencies [46f2ab8]
+- Updated dependencies [8b87117]
+- Updated dependencies [a6b6ccf]
+  - cojson@0.8.35
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+
 ## 0.0.112
 
 ### Patch Changes

examples/chat/README.md

@@ -1,32 +1,27 @@
-# Jazz Chat Example
+# Chat example with Jazz and React
 
 Live version: [https://chat.jazz.tools](https://chat.jazz.tools)
 
 ## Installing & running the example locally
 
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
-
-Start by checking out `jazz`
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
 ```bash
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/chat
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/chat # or any other directory
-tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat
-cd ~/jazz-examples/chat
+npx degit gardencmp/jazz jazz
 ```
 
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
+Go to the chat example directory:
 ```bash
-pnpm install
+cd jazz/examples/chat
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
 ```
 
 Start the dev server:
-
 ```bash
 pnpm dev
 ```
@@ -39,4 +34,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+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/main.tsx](./src/main.tsx).

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.112",
+  "version": "0.0.113",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,10 +18,10 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.34",
+    "cojson": "workspace:0.8.35",
     "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.34",
-    "jazz-tools": "workspace:0.8.34",
+    "jazz-react": "workspace:0.8.35",
+    "jazz-tools": "workspace:0.8.35",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/clerk/CHANGELOG.md

@@ -1,5 +1,15 @@
 # minimal-auth-clerk
 
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+  - jazz-react-auth-clerk@0.8.35
+
 ## 0.0.11
 
 ### Patch Changes

examples/clerk/README.md

@@ -1,3 +1,34 @@
-# Minimal Jazz Auth Clerk Example
+# Passkey authentication example with Jazz and React
+
+This is an example of how to use clerk authentication with Jazz.
+
+Live version: https://clerk-demo.jazz.tools
+
+## Installing & running the example locally
+
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+```bash
+npx degit gardencmp/jazz jazz
+```
+
+Go to the clerk example directory:
+```bash
+cd jazz/examples/clerk
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
+```
+
+Start the dev server:
+```bash
+pnpm dev
+```
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
 
-This is a minimal example of how to use Clerk authentication with Jazz.

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,7 @@
     "@clerk/clerk-react": "^5.4.1",
     "jazz-tools": "workspace:*",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.8.34",
+    "jazz-react-auth-clerk": "workspace:0.8.35",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/clerk/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

examples/clerk/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

examples/clerk/src/App.tsx

@@ -1,15 +1,14 @@
-import "./App.css";
 import { useAccount } from "./main";
 
 function App() {
   const { me, logOut } = useAccount();
 
   return (
-    <>
+    <div className="container">
       <h1>You're logged in</h1>
       <p>Welcome back, {me?.profile?.name}</p>
       <button onClick={() => logOut()}>Logout</button>
-    </>
+    </div>
   );
 }
 

examples/clerk/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

examples/clerk/src/index.css

@@ -30,6 +30,10 @@ body {
   min-height: 100vh;
 }
 
+#root {
+  width: 100%;
+}
+
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
@@ -37,21 +41,11 @@ h1 {
 
 button {
   border-radius: 8px;
-  border: 1px solid transparent;
+  border: 0;
   padding: 0.6em 1.2em;
-  font-size: 1em;
   font-weight: 500;
-  font-family: inherit;
   background-color: #1a1a1a;
   cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
@@ -66,3 +60,13 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+.container {
+  max-width: 200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}

examples/clerk/src/main.tsx

@@ -21,7 +21,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
   const [auth, state] = useJazzClerkAuth(clerk);
 
   return (
-    <>
+    <main className="container">
       {state?.errors?.map((error) => (
         <div key={error}>{error}</div>
       ))}
@@ -35,7 +35,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
       ) : (
         <SignInButton />
       )}
-    </>
+    </main>
   );
 }
 

examples/image-upload/.gitignore

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

examples/image-upload/CHANGELOG.md

@@ -0,0 +1,11 @@
+# image-upload
+
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+  - jazz-browser-media-images@0.8.35

examples/image-upload/README.md

@@ -0,0 +1,40 @@
+# Image upload example with Jazz and React
+
+This is an example of how to upload and render images with Jazz.
+
+Live version: https://image-upload-demo.jazz.tools
+
+## Installing & running the example locally
+
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+```bash
+npx degit gardencmp/jazz jazz
+```
+
+Go to the image-upload example directory:
+```bash
+cd jazz/examples/image-upload
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
+```
+
+Start the dev server:
+```bash
+pnpm dev
+```
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of `JazzProvider` component in [./src/main.tsx](./src/main.tsx).

examples/image-upload/index.html

@@ -2,13 +2,11 @@
 <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 FileStream Tests</title>
+    <title>Jazz | Image upload example</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/app.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

examples/image-upload/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "image-upload",
+  "private": true,
+  "version": "0.0.10",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write"
+  },
+  "dependencies": {
+    "jazz-browser-media-images": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10"
+  }
+}

examples/image-upload/src/App.tsx

@@ -0,0 +1,22 @@
+import ImageUpload from "./ImageUpload.tsx";
+import { useAccount } from "./main";
+
+function App() {
+  const { me, logOut } = useAccount();
+
+  return (
+    <div className="container">
+      <nav>
+        <span>
+          You're logged in as <strong>{me?.profile?.name}</strong>
+        </span>
+        <button onClick={() => logOut()}>Logout</button>
+      </nav>
+      <main>
+        <ImageUpload />
+      </main>
+    </div>
+  );
+}
+
+export default App;

examples/image-upload/src/ImageUpload.tsx

@@ -0,0 +1,56 @@
+import { createImage } from "jazz-browser-media-images";
+import { ProgressiveImg } from "jazz-react";
+import { ImageDefinition } from "jazz-tools";
+import { ChangeEvent, useRef } from "react";
+import { useAccount } from "./main.tsx";
+
+function Image({ image }: { image: ImageDefinition }) {
+  return (
+    <ProgressiveImg image={image}>
+      {({ src }) => <img src={src} />}
+    </ProgressiveImg>
+  );
+}
+
+export default function ImageUpload() {
+  const { me } = useAccount();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onImageChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    if (!me?.profile) return;
+
+    const file = event.currentTarget.files?.[0];
+
+    if (file) {
+      me.profile.image = await createImage(file, {
+        owner: me.profile._owner,
+      });
+    }
+  };
+
+  const deleteImage = () => {
+    if (!me?.profile) return;
+
+    me.profile.image = null;
+  };
+
+  return (
+    <>
+      <div>{me?.profile?.image && <Image image={me.profile.image} />}</div>
+
+      <div>
+        {me?.profile?.image ? (
+          <button type="button" onClick={deleteImage}>
+            Delete image
+          </button>
+        ) : (
+          <div>
+            <label>Upload image</label>
+            <input ref={inputRef} type="file" onChange={onImageChange} />
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

examples/image-upload/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+button {
+  border-radius: 8px;
+  border: 0;
+  padding: 0.6em 1.2em;
+  font-weight: 500;
+  background-color: #1a1a1a;
+  cursor: pointer;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid whitesmoke;
+  margin-bottom: 2rem;
+}
+
+.container {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.25rem;
+}

examples/image-upload/src/main.tsx

@@ -0,0 +1,36 @@
+import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import { JazzAccount } from "./schema.ts";
+
+const Jazz = createJazzReactApp({
+  AccountSchema: JazzAccount,
+});
+
+export const { useAccount, useCoState } = Jazz;
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+
+  return (
+    <>
+      <Jazz.Provider
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=image-upload-example@gcmp.io"
+      >
+        {children}
+      </Jazz.Provider>
+      <DemoAuthBasicUI appName="Image upload" state={authState} />
+    </>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <JazzAndAuth>
+      <App />
+    </JazzAndAuth>
+  </StrictMode>,
+);

examples/image-upload/src/schema.ts

@@ -0,0 +1,16 @@
+import { Account, ImageDefinition, Profile, co } from "jazz-tools";
+
+export class JazzProfile extends Profile {
+  image = co.ref(ImageDefinition, { optional: true });
+}
+
+export class JazzAccount extends Account {
+  profile = co.ref(JazzProfile);
+
+  /** The account migration is run on account creation and on every log-in.
+   *  You can use it to set up the account root and any other initial CoValues you need.
+   */
+  migrate(this: JazzAccount, creationProps?: { name: string }) {
+    super.migrate(creationProps);
+  }
+}

examples/image-upload/tsconfig.app.json

@@ -1,25 +1,24 @@
 {
   "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
 
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "baseUrl": "."
+    "noUncheckedSideEffectImports": true
   },
   "include": ["src"]
 }

examples/image-upload/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

examples/image-upload/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/image-upload/vite.config.ts

@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});

examples/inspector/CHANGELOG.md

@@ -1,5 +1,16 @@
 # jazz-example-inspector
 
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [3f15a23]
+- Updated dependencies [46f2ab8]
+- Updated dependencies [8b87117]
+- Updated dependencies [a6b6ccf]
+  - cojson@0.8.35
+  - cojson-transport-ws@0.8.35
+
 ## 0.0.81
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.81",
+  "version": "0.0.82",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.34",
-    "cojson-transport-ws": "workspace:0.8.34",
+    "cojson": "workspace:0.8.35",
+    "cojson-transport-ws": "workspace:0.8.35",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/music-player/CHANGELOG.md

@@ -1,5 +1,14 @@
 # jazz-example-musicplayer
 
+## 0.0.33
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+
 ## 0.0.32
 
 ### Patch Changes

examples/music-player/README.md

@@ -1,32 +1,27 @@
-# Jazz Music Player Example
+# Music player example with Jazz and React
 
 Live version: https://music-demo.jazz.tools
 
 ## Installing & running the example locally
 
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
-
-Start by checking out `jazz`
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
 ```bash
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/music-player
-pnpm pack --pack-destination /tmp
-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
+npx degit gardencmp/jazz jazz
 ```
 
-This ensures you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
+Go to the music-player example directory:
 ```bash
-pnpm install
+cd jazz/examples/music-player
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
 ```
 
 Start the dev server:
-
 ```bash
 pnpm dev
 ```

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.32",
+  "version": "0.0.33",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,8 +18,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.34",
-    "jazz-tools": "workspace:0.8.34",
+    "jazz-react": "workspace:0.8.35",
+    "jazz-tools": "workspace:0.8.35",
     "lucide-react": "^0.274.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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

@@ -26,13 +26,13 @@ export async function uploadMusicTracks(
   account: MusicaAccount,
   files: Iterable<File>,
 ) {
-  // The ownership object defines the user that owns the created coValues
-  // by setting the ownership with "account" we configure the coValues to be private
-  const ownership = {
-    owner: account,
-  };
-
   for (const file of files) {
+    // The ownership object defines the user that owns the created coValues
+    // We are creating a group for each CoValue in order to be able to share them via Playlist
+    const ownership = {
+      owner: Group.create({ owner: account }),
+    };
+
     const data = await getAudioFileData(file);
 
     // We transform the file blob into a FileStream
@@ -86,16 +86,31 @@ export async function addTrackToPlaylist(
 ) {
   if (!account) return;
 
-  if (playlist.tracks?.some((t) => t?._refs.sourceTrack.id === track.id))
+  const alreadyAdded = playlist.tracks?.some(
+    (t) => t?.id === track.id || t?._refs.sourceTrack?.id === track.id,
+  );
+
+  if (alreadyAdded) return;
+
+  // Check if the track has been created after the Group inheritance was introduced
+  if (track._owner._type === "Group" && playlist._owner._type === "Group") {
+    /**
+     * Extending the track with the Playlist group in order to make the music track
+     * visible to the Playlist user
+     */
+    const trackGroup = track._owner;
+    trackGroup.extend(playlist._owner);
+
+    playlist.tracks?.push(track);
     return;
+  }
 
   /**
    * Since musicTracks are created as private values (see uploadMusicTracks)
    * to make them shareable as part of the playlist we are cloning them
    * and setting the playlist group as owner of the clone
    *
-   * In the future it will be possible to "inherit" the parent group so you
-   * won't need to clone values to have this kind of sharing granularity
+   * Doing this for backwards compatibility for when the Group inheritance wasn't possible
    */
   const ownership = { owner: playlist._owner };
   const blob = await FileStream.loadAsBlob(track._refs.file.id, account);

examples/onboarding/CHANGELOG.md

@@ -1,5 +1,15 @@
 # jazz-example-onboarding
 
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+  - jazz-browser-media-images@0.8.35
+
 ## 0.0.13
 
 ### Patch Changes

examples/onboarding/README.md

@@ -1 +1,35 @@
-# vite-ts-react-tailwind
+# Onboarding example with Jazz and React
+
+## Installing & running the example locally
+
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+```bash
+npx degit gardencmp/jazz jazz
+```
+
+Go to the onboarding example directory:
+```bash
+cd jazz/examples/onboarding
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
+```
+
+Start the dev server:
+```bash
+pnpm dev
+```
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx cojson-simple-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/main.tsx](./src/main.tsx).

examples/onboarding/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-onboarding",
   "private": true,
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passkey-svelte/.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

examples/passkey-svelte/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

examples/passkey-svelte/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

examples/passkey-svelte/.prettierrc

@@ -0,0 +1,16 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

examples/passkey-svelte/CHANGELOG.md

@@ -0,0 +1,8 @@
+# passkey-svelte
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [0e59e65]
+  - jazz-svelte@0.0.2

examples/passkey-svelte/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

examples/passkey-svelte/eslint.config.js

@@ -0,0 +1,33 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs['flat/recommended'],
+  prettier,
+  ...svelte.configs['flat/prettier'],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    }
+  },
+  {
+    files: ['**/*.svelte'],
+
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser
+      }
+    }
+  },
+  {
+    ignores: ['build/', '.svelte-kit/', 'dist/']
+  }
+);

examples/passkey-svelte/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "passkey-svelte",
+  "version": "0.0.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "format-and-lint": "pnpm run format && pnpm run lint",
+    "format-and-lint:fix": "pnpm run format --write && pnpm run lint --fix"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/eslint": "^9.6.0",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "globals": "^15.0.0",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.0.3"
+  },
+  "dependencies": {
+    "jazz-svelte": "workspace:*"
+  }
+}

examples/passkey-svelte/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

examples/passkey-svelte/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

examples/passkey-svelte/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

examples/passkey-svelte/src/lib/jazz.ts

@@ -0,0 +1,3 @@
+import { createJazzApp } from 'jazz-svelte';
+
+export const { useAccount, useCoState, Provider } = createJazzApp();

examples/passkey-svelte/src/routes/+layout.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { usePasskeyAuth, PasskeyAuthBasicUI } from 'jazz-svelte';
+  import { Provider } from '$lib/jazz';
+
+  let { children } = $props();
+
+  let auth = usePasskeyAuth({ appName: 'minimal-svelte-auth-passkey' });
+
+  $inspect(auth.state);
+</script>
+
+<div
+  style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;"
+>
+  <PasskeyAuthBasicUI state={auth.state} />
+
+  {#if auth.current}
+    <Provider
+      auth={auth.current}
+      peer="wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@gcmp.io"
+    >
+      {@render children?.()}
+    </Provider>
+  {/if}
+</div>
+
+<style>
+  :global(html, body) {
+    margin: 0;
+  }
+</style>

examples/passkey-svelte/src/routes/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { useAccount } from '$lib/jazz';
+
+  const account = useAccount({
+    root: {}
+  });
+
+  $inspect(account);
+</script>
+
+<div class="container">
+  <h1>Welcome back, {account?.me?.profile?.name}</h1>
+  <button onclick={() => account.logOut()}>Log out</button>
+</div>
+
+<style>
+  .container {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: start;
+  }
+
+  button {
+    background: #000;
+    color: #fff;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+    min-height: 38px;
+    cursor: pointer;
+  }
+</style>

examples/passkey-svelte/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://svelte.dev/docs/kit/integrations
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
+    adapter: adapter()
+  }
+};
+
+export default config;

examples/passkey-svelte/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}

examples/passkey-svelte/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()]
+});

examples/passkey/CHANGELOG.md

@@ -1,5 +1,14 @@
 # minimal-auth-passkey
 
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+
 ## 0.0.10
 
 ### Patch Changes

examples/passkey/README.md

@@ -1,4 +1,34 @@
-# Minimal Jazz Passkey Auth Example
+# Passkey authentication example with Jazz and React
 
-This is a minimal example of how to use passkey authentication with Jazz.
+This is an example of how to use passkey authentication with Jazz.
+
+Live version: https://passkey-demo.jazz.tools
+
+## Installing & running the example locally
+
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+```bash
+npx degit gardencmp/jazz jazz
+```
+
+Go to the passkey example directory:
+```bash
+cd jazz/examples/passkey
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
+```
+
+Start the dev server:
+```bash
+pnpm dev
+```
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
 

examples/passkey/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passkey",
   "private": true,
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passkey/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

examples/passkey/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

examples/passkey/src/App.tsx

@@ -1,15 +1,14 @@
-import "./App.css";
 import { useAccount } from "./main";
 
 function App() {
   const { me, logOut } = useAccount();
 
   return (
-    <>
+    <main>
       <h1>You're logged in</h1>
-      <p>Welcome back, {me?.profile?.name}</p>
+      <p>Welcome back, {me?.profile?.name}!</p>
       <button onClick={() => logOut()}>Logout</button>
-    </>
+    </main>
   );
 }
 

examples/passkey/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

examples/passkey/src/index.css

@@ -30,6 +30,10 @@ body {
   min-height: 100vh;
 }
 
+#root {
+  width: 100%;
+}
+
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
@@ -37,21 +41,11 @@ h1 {
 
 button {
   border-radius: 8px;
-  border: 1px solid transparent;
+  border: 0;
   padding: 0.6em 1.2em;
-  font-size: 1em;
   font-weight: 500;
-  font-family: inherit;
   background-color: #1a1a1a;
   cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
@@ -66,3 +60,9 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+main {
+  padding: 1rem;
+  margin: 0 auto;
+  text-align: center;
+}

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,14 @@
 # jazz-password-manager
 
+## 0.0.32
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+
 ## 0.0.31
 
 ### Patch Changes

examples/password-manager/README.md

@@ -1,4 +1,4 @@
-# Password Manager Example
+# Password manager example with Jazz and React
 
 Live version: https://passwords-demo.jazz.tools
 
@@ -6,28 +6,24 @@ Live version: https://passwords-demo.jazz.tools
 
 ## Installing & running the example locally
 
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
-Start by checking out `jazz`
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
 ```bash
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/password-manager
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/password-manager # or any other directory
-tar -xf /tmp/jazz-example-pass-manager-* --strip-components 1 -C ~/jazz-examples/password-manager
-cd ~/jazz-examples/password-manager
+npx degit gardencmp/jazz jazz
 ```
 
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
+Go to the password-manager example directory:
 ```bash
-pnpm install
+cd jazz/examples/password-manager
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
 ```
 
 Start the dev server:
-
 ```bash
 pnpm dev
 ```

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.31",
+  "version": "0.0.32",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,8 +12,8 @@
     "clean-install": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
   },
   "dependencies": {
-    "jazz-react": "workspace:0.8.34",
-    "jazz-tools": "workspace:0.8.34",
+    "jazz-react": "workspace:0.8.35",
+    "jazz-tools": "workspace:0.8.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.41.5",

examples/pets/CHANGELOG.md

@@ -1,5 +1,15 @@
 # jazz-example-pets
 
+## 0.0.130
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+  - jazz-browser-media-images@0.8.35
+
 ## 0.0.129
 
 ### Patch Changes

examples/pets/README.md

@@ -1,36 +1,32 @@
-# Jazz Rate-My-Pet List Example
+# Rate My Pets example with Jazz and React
 
 Live version: https://pets-demo.jazz.tools/
 
 ## Installing & running the example locally
 
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
-
-Start by checking out `jazz`
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
 ```bash
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/pets
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/pets # or any other directory
-tar -xf /tmp/jazz-example-pets-* --strip-components 1 -C ~/jazz-examples/pets
-cd ~/jazz-examples/pets
+npx degit gardencmp/jazz jazz
 ```
 
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
+Go to the pets example directory:
 ```bash
-pnpm install
+cd jazz/examples/pets
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
 ```
 
 Start the dev server:
-
 ```bash
 pnpm dev
 ```
 
+
 ## Questions / problems / feedback
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.129",
+  "version": "0.0.130",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,9 +19,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.34",
-    "jazz-react": "workspace:0.8.34",
-    "jazz-tools": "workspace:0.8.34",
+    "jazz-browser-media-images": "workspace:0.8.35",
+    "jazz-react": "workspace:0.8.35",
+    "jazz-tools": "workspace:0.8.35",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -41,7 +41,7 @@
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "is-ci": "^3.0.1",
-    "jazz-run": "workspace:0.8.34",
+    "jazz-run": "workspace:0.8.35",
     "postcss": "^8.4.27",
     "tailwindcss": "3.3.2",
     "typescript": "^5.3.3",

examples/pets/src/1_schema.ts

@@ -23,6 +23,7 @@ export const ReactionTypes = [
   "tiny",
   "chonkers",
 ] as const;
+
 export type ReactionType = (typeof ReactionTypes)[number];
 
 export class PetReactions extends CoFeed.Of(co.json<ReactionType>()) {}

examples/reactions/.gitignore

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

examples/reactions/CHANGELOG.md

@@ -0,0 +1,11 @@
+# reactions
+
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [9212ab8]
+- Updated dependencies [8b87117]
+  - jazz-react@0.8.35
+  - jazz-tools@0.8.35
+  - jazz-browser-media-images@0.8.35

examples/reactions/README.md

@@ -0,0 +1,37 @@
+# Reactions example with Jazz and React
+
+Live version: [https://reactions-demo.jazz.tools](https://reactions-demo.jazz.tools)
+
+## Installing & running the example locally
+
+(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+
+Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+```bash
+npx degit gardencmp/jazz jazz
+```
+
+Go to the reactions example directory:
+```bash
+cd jazz/examples/reactions
+```
+
+Install and build dependencies:
+```bash
+pnpm i && npx turbo build
+```
+
+Start the dev server:
+```bash
+pnpm dev
+```
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/main.tsx](./src/main.tsx).

examples/reactions/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz | Reactions example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/reactions/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "reactions",
+  "private": true,
+  "version": "0.0.10",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write"
+  },
+  "dependencies": {
+    "hash-slash": "workspace:*",
+    "jazz-browser-media-images": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10"
+  }
+}

examples/reactions/src/App.tsx

@@ -0,0 +1,38 @@
+import { useIframeHashRouter } from "hash-slash";
+import { Group, ID } from "jazz-tools";
+import { ReactionsScreen } from "./ReactionsScreen.tsx";
+import { useAccount } from "./main";
+import { Reactions } from "./schema.ts";
+
+function App() {
+  const { me, logOut } = useAccount();
+  const router = useIframeHashRouter();
+
+  const createReactions = () => {
+    if (!me) return;
+    const group = Group.create({ owner: me });
+    group.addMember("everyone", "writer");
+    const chat = Reactions.create([], { owner: group });
+    router.navigate("/#/reactions/" + chat.id);
+  };
+
+  return (
+    <div className="container">
+      <nav>
+        <span>
+          You're logged in as <strong>{me?.profile?.name}</strong>
+        </span>
+        <button className="btn" onClick={() => logOut()}>
+          Logout
+        </button>
+      </nav>
+
+      {router.route({
+        "/": () => createReactions() as never,
+        "/reactions/:id": (id) => <ReactionsScreen id={id as ID<Reactions>} />,
+      })}
+    </div>
+  );
+}
+
+export default App;

examples/reactions/src/ReactionsScreen.tsx

@@ -0,0 +1,64 @@
+import { ID } from "jazz-tools";
+import { useCoState } from "./main.tsx";
+import { ReactionType, ReactionTypes, Reactions } from "./schema.ts";
+
+const reactionEmojiMap: {
+  [reaction in (typeof ReactionTypes)[number]]: string;
+} = {
+  aww: "😍",
+  love: "❤️",
+  haha: "😂",
+  wow: "😮",
+  tiny: "🐥",
+  chonkers: "🐘",
+};
+
+export function ReactionsScreen(props: { id: ID<Reactions> }) {
+  const reactions = useCoState(Reactions, props.id, []);
+
+  if (!reactions) return;
+
+  return (
+    <>
+      <section>
+        <h1>Add your reaction</h1>
+        <ReactionButtons reactions={reactions} />
+      </section>
+
+      <section>
+        <h2>Reactions from you and other users</h2>
+        <ReactionOverview reactions={reactions} />
+      </section>
+    </>
+  );
+}
+
+const ReactionButtons = ({ reactions }: { reactions: Reactions }) => (
+  <div className="reaction-buttons">
+    {ReactionTypes.map((reactionType) => (
+      <button
+        key={reactionType}
+        type="button"
+        onClick={() => {
+          reactions?.push(reactionType);
+        }}
+        title={`React with ${reactionType}`}
+        className={reactions?.byMe?.value === reactionType ? "active" : ""}
+        data-selected={reactions?.byMe?.value === reactionType}
+      >
+        {reactionEmojiMap[reactionType]}
+      </button>
+    ))}
+  </div>
+);
+
+const ReactionOverview = ({ reactions }: { reactions: Reactions }) => (
+  <>
+    {Object.values(reactions).map((reaction) => (
+      <div key={reaction.by?.profile?.name} className="reaction-row">
+        {reactionEmojiMap[reaction.value as ReactionType]}{" "}
+        {reaction.by?.profile?.name}
+      </div>
+    ))}
+  </>
+);

examples/reactions/src/index.css

@@ -0,0 +1,106 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #000;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --border-color: #404040;
+}
+
+button.btn {
+  border-radius: 8px;
+  border: 0;
+  padding: 0.6em 1.2em;
+  font-weight: 500;
+  background-color: #1a1a1a;
+  cursor: pointer;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --border-color: #e5e5e5;
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button.btn {
+    background-color: #f9f9f9;
+  }
+}
+
+* {
+  border-color: var(--border-color);
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 2rem;
+}
+
+.container {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+h1,
+h2 {
+  margin-bottom: 1rem;
+  font-weight: 500;
+  font-size: 1.25rem;
+}
+
+section {
+  margin-bottom: 2rem;
+}
+
+.reaction-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.reaction-buttons button {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 1.5rem;
+  padding: 0.5rem;
+  line-height: 1;
+}
+
+.reaction-buttons button.active {
+  background-color: blue;
+  border-color: blue;
+}
+
+.reaction-buttons button:not(.active) {
+  background-color: transparent;
+}
+
+.reaction-row {
+  margin: 0.5rem 0;
+}

examples/reactions/src/main.tsx

@@ -0,0 +1,33 @@
+import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+const Jazz = createJazzReactApp();
+
+export const { useAccount, useCoState } = Jazz;
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, authState] = useDemoAuth();
+
+  return (
+    <>
+      <Jazz.Provider
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=reactions-example@gcmp.io"
+      >
+        {children}
+      </Jazz.Provider>
+      <DemoAuthBasicUI appName="Reactions" state={authState} />
+    </>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <JazzAndAuth>
+      <App />
+    </JazzAndAuth>
+  </StrictMode>,
+);

examples/reactions/src/schema.ts

@@ -0,0 +1,14 @@
+import { CoFeed, co } from "jazz-tools";
+
+export const ReactionTypes = [
+  "aww",
+  "love",
+  "haha",
+  "wow",
+  "tiny",
+  "chonkers",
+] as const;
+
+export type ReactionType = (typeof ReactionTypes)[number];
+
+export class Reactions extends CoFeed.Of(co.json<ReactionType>()) {}