chore: cleanup

feat: top-level imports for Jazz react hooks

.changeset/healthy-pianos-rest.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Return field name on \_edits

.changeset/loud-llamas-compare.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Simplify the .create calls by accepting directly "Account | Group" as second param

.changeset/lucky-cherries-hug.md

@@ -0,0 +1,5 @@
+---
+"cojson": patch
+---
+
+Add a crypto entry to optionally import the crypto modules

.changeset/seven-islands-grin.md

@@ -0,0 +1,7 @@
+---
+"jazz-react": minor
+---
+
+Change the way the JazzProvider is created and make the hooks available as top-level imports.
+
+This is a breaking change.

.changeset/tall-zoos-smile.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Optimize the subscribe to resolve the CoValues stored in memory synchronously

.changeset/unlucky-mails-search.md

@@ -0,0 +1,5 @@
+---
+"jazz-react-native": minor
+---
+
+Change the way the JazzProvider is created and make the hooks available as top-level imports.

.github/workflows/playwright.yml

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

.github/workflows/release.yml

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

.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 --filter="./packages/*"
 
       - name: Unit Tests
         run: pnpm test:ci

examples/book-shelf/CHANGELOG.md

@@ -1,5 +1,65 @@
 # jazz-example-book-shelf
 
+## 0.1.38
+
+### Patch Changes
+
+- jazz-react@0.8.50
+- jazz-tools@0.8.50
+- jazz-browser-media-images@0.8.50
+
+## 0.1.37
+
+### Patch Changes
+
+- jazz-react@0.8.49
+- jazz-tools@0.8.49
+- jazz-browser-media-images@0.8.49
+
+## 0.1.36
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser-media-images@0.8.48
+  - jazz-react@0.8.48
+
+## 0.1.35
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-browser-media-images@0.8.45
+
+## 0.1.34
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.1.33
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.1.32
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
 ## 0.1.31
 
 ### Patch Changes

examples/book-shelf/README.md

@@ -38,4 +38,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/components/JazzAndAuth.tsx](./src/components/JazzAndAuth.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 `<JazzProvider>` 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.31",
+  "version": "0.1.38",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,19 +11,19 @@
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.39",
-    "jazz-react": "workspace:0.8.39",
-    "jazz-tools": "workspace:0.8.39",
+    "jazz-browser-media-images": "workspace:0.8.50",
+    "jazz-react": "workspace:0.8.50",
+    "jazz-tools": "workspace:0.8.50",
     "next": "14.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/node": "^22.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2"
   }
 }

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

@@ -2,10 +2,10 @@
 
 import { Button } from "@/components/Button";
 import { Container } from "@/components/Container";
-import { useAccount } from "@/components/JazzAndAuth";
 import RatingInput from "@/components/RatingInput";
 import { BookReview, ListOfBookReviews } from "@/schema";
 import { createImage } from "jazz-browser-media-images";
+import { useAccount } from "jazz-react";
 import { Group, ImageDefinition } from "jazz-tools";
 import { useRouter } from "next/navigation";
 import { ChangeEvent, useState } from "react";

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

@@ -2,11 +2,11 @@
 
 import { BookCover } from "@/components/BookCover";
 import { Container } from "@/components/Container";
-import { useCoState } from "@/components/JazzAndAuth";
 import Rating from "@/components/Rating";
 import RatingInput from "@/components/RatingInput";
 import { BookReview } from "@/schema";
 import clsx from "clsx";
+import { useCoState } from "jazz-react";
 import { Group, ID } from "jazz-tools";
 
 const BookReviewTitle = ({

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

@@ -1,9 +1,9 @@
 "use client";
 
 import { Container } from "@/components/Container";
-import { useAccount } from "@/components/JazzAndAuth";
 import UserProfile from "@/components/UserProfile";
 import { JazzAccount } from "@/schema";
+import { useAccount } from "jazz-react";
 import { ID } from "jazz-tools";
 
 export default function Home() {

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

@@ -1,12 +1,11 @@
 import { Button } from "@/components/Button";
-import { useAccount } from "@/components/JazzAndAuth";
 import PlusIcon from "@/components/icons/PlusIcon";
 import { BookReview } from "@/schema";
 import clsx from "clsx";
 import { createImage } from "jazz-browser-media-images";
+import { useAccount } from "jazz-react";
 import { ProgressiveImg } from "jazz-react";
-import { Group, ImageDefinition } from "jazz-tools";
-import { ChangeEvent, useRef, useState } from "react";
+import { ChangeEvent, useRef } from "react";
 
 const BookCoverContainer = ({
   children,

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

@@ -1,8 +1,8 @@
 "use client";
 
-import { BookCover, BookCoverReadOnly } from "@/components/BookCover";
-import { useCoState } from "@/components/JazzAndAuth";
+import { BookCoverReadOnly } from "@/components/BookCover";
 import StarIcon from "@/components/icons/StarIcon";
+import { useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import Link from "next/link";
 import { BookReview } from "../schema";

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

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

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

@@ -2,7 +2,7 @@
 
 import { Button } from "@/components/Button";
 import { Container } from "@/components/Container";
-import { useAccount } from "@/components/JazzAndAuth";
+import { useAccount } from "jazz-react";
 import Link from "next/link";
 
 export function Nav() {

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

@@ -2,8 +2,8 @@
 
 import { BookReviewThumbnail } from "@/components/BookReviewThumbnail";
 import { Button } from "@/components/Button";
-import { useCoState } from "@/components/JazzAndAuth";
 import { JazzAccount, JazzProfile, ListOfBookReviews } from "@/schema";
+import { useCoState } from "jazz-react";
 import { Group, ID } from "jazz-tools";
 
 export default function UserProfile({ id }: { id: ID<JazzAccount> }) {

examples/book-shelf/src/schema.ts

@@ -31,7 +31,5 @@ export class JazzAccount extends Account {
   /** 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);
-  }
+  migrate() {}
 }

examples/book-shelf/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "books-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,89 @@
 # chat-rn-clerk
 
+## 1.0.40
+
+### Patch Changes
+
+- jazz-react-native@0.8.50
+- jazz-react-native-auth-clerk@0.8.50
+- jazz-tools@0.8.50
+- jazz-react-native-media-images@0.8.50
+
+## 1.0.39
+
+### Patch Changes
+
+- jazz-react-native@0.8.49
+- jazz-react-native-auth-clerk@0.8.49
+- jazz-tools@0.8.49
+- jazz-react-native-media-images@0.8.49
+
+## 1.0.38
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react-native@0.8.48
+  - jazz-react-native-auth-clerk@0.8.48
+  - jazz-react-native-media-images@0.8.48
+
+## 1.0.37
+
+### Patch Changes
+
+- Updated dependencies [33ef9c4]
+  - jazz-react-native@0.8.47
+  - jazz-react-native-auth-clerk@0.8.47
+
+## 1.0.36
+
+### Patch Changes
+
+- Updated dependencies [ab4ffbd]
+  - jazz-react-native@0.8.46
+  - jazz-react-native-auth-clerk@0.8.46
+
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies [7701307]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-react-native@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-react-native-auth-clerk@0.8.45
+  - jazz-react-native-media-images@0.8.45
+
+## 1.0.34
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-react-native-auth-clerk@0.8.44
+- jazz-tools@0.8.44
+- jazz-react-native-media-images@0.8.44
+
+## 1.0.33
+
+### Patch Changes
+
+- cdc7f9f: Fixing react-native examples
+- Updated dependencies [cdc7f9f]
+  - jazz-react-native-auth-clerk@0.8.43
+
+## 1.0.32
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-react-native-auth-clerk@0.8.41
+- jazz-tools@0.8.41
+- jazz-react-native-media-images@0.8.41
+
 ## 1.0.31
 
 ### Patch Changes

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

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

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

@@ -1,9 +1,9 @@
-import { useAccount, useCoState } from "@/src/jazz";
 import { Chat, Message } from "@/src/schema";
-import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { useNavigation } from "@react-navigation/native";
 import clsx from "clsx";
 import * as Clipboard from "expo-clipboard";
 import { useLocalSearchParams } from "expo-router";
+import { useAccount, useCoState } from "jazz-react-native";
 import { Group, ID } from "jazz-tools";
 import { useEffect, useLayoutEffect, useState } from "react";
 import React, {

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

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

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

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

examples/chat-rn-clerk/global.css

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

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

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

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.31",
+  "version": "1.0.40",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -45,9 +45,9 @@
     "jazz-react-native-auth-clerk": "workspace:*",
     "jazz-react-native-media-images": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^2.0.11",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "nativewind": "^4.1.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
     "react-native-gesture-handler": "~2.20.2",
@@ -70,8 +70,8 @@
     "jest": "^29.2.1",
     "jest-expo": "~52.0.2",
     "react-test-renderer": "18.2.0",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2"
   },
   "private": true
 }

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

@@ -1,4 +1,5 @@
 import { useClerk, useUser } from "@clerk/clerk-expo";
+import { JazzProvider, setupKvStore } from "jazz-react-native";
 import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
 import React, {
   createContext,
@@ -8,8 +9,6 @@ import React, {
   useState,
 } from "react";
 import { Text, View } from "react-native";
-import { Jazz, kvStore } from "./jazz";
-
 const AuthContext = createContext<{
   isAuthenticated: boolean;
   isLoading: boolean;
@@ -22,6 +21,8 @@ export function useAuth() {
   return useContext(AuthContext);
 }
 
+const kvStore = setupKvStore();
+
 export function JazzAndAuth({ children }: PropsWithChildren) {
   const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
   const clerk = useClerk();
@@ -47,13 +48,12 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
           </View>
         ))}
       {auth && clerk.user ? (
-        <Jazz.Provider
+        <JazzProvider
           auth={auth}
           peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
-          storage={undefined}
         >
           {children}
-        </Jazz.Provider>
+        </JazzProvider>
       ) : (
         children
       )}

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

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

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

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

examples/chat-rn-clerk/tsconfig.json

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

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,67 @@
 # chat-rn
 
+## 1.0.37
+
+### Patch Changes
+
+- jazz-react-native@0.8.50
+- jazz-tools@0.8.50
+
+## 1.0.36
+
+### Patch Changes
+
+- jazz-react-native@0.8.49
+- jazz-tools@0.8.49
+
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react-native@0.8.48
+
+## 1.0.34
+
+### Patch Changes
+
+- Updated dependencies [33ef9c4]
+  - jazz-react-native@0.8.47
+
+## 1.0.33
+
+### Patch Changes
+
+- Updated dependencies [ab4ffbd]
+  - jazz-react-native@0.8.46
+
+## 1.0.32
+
+### Patch Changes
+
+- Updated dependencies [7701307]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-react-native@0.8.45
+  - jazz-tools@0.8.45
+
+## 1.0.31
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-tools@0.8.44
+
+## 1.0.30
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-tools@0.8.41
+
 ## 1.0.29
 
 ### Patch Changes

examples/chat-rn/babel.config.js

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

examples/chat-rn/global.css

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

examples/chat-rn/metro.config.js

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

examples/chat-rn/package.json

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

examples/chat-rn/src/App.tsx

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

examples/chat-rn/src/chat.tsx

@@ -14,7 +14,7 @@ import React, {
   Alert,
 } from "react-native";
 
-import { useAccount, useCoState } from "./jazz";
+import { useAccount, useCoState } from "jazz-react-native";
 import { Chat, Message } from "./schema";
 
 export default function ChatScreen({ navigation }: { navigation: any }) {

examples/chat-rn/src/invite.tsx

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

examples/chat-rn/src/jazz.tsx

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

examples/chat-rn/tailwind.config.js

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

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,67 @@
 # chat-vue
 
+## 0.0.29
+
+### Patch Changes
+
+- jazz-browser@0.8.50
+- jazz-tools@0.8.50
+- jazz-vue@0.8.50
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-browser@0.8.49
+- jazz-tools@0.8.49
+- jazz-vue@0.8.49
+
+## 0.0.27
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser@0.8.48
+  - jazz-vue@0.8.48
+
+## 0.0.26
+
+### Patch Changes
+
+- Updated dependencies [6f0bd7f]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-browser@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-vue@0.8.45
+
+## 0.0.25
+
+### Patch Changes
+
+- jazz-browser@0.8.44
+- jazz-tools@0.8.44
+- jazz-vue@0.8.44
+
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [ac216b9]
+  - jazz-browser@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-vue@0.8.41
+
+## 0.0.23
+
+### Patch Changes
+
+- jazz-browser@0.8.40
+- jazz-vue@0.8.40
+
 ## 0.0.22
 
 ### Patch Changes

examples/chat-vue/package.json

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

examples/chat-vue/tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

examples/chat-vue/tailwind.config.ts

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,74 @@
 # jazz-example-chat
 
+## 0.0.124
+
+### Patch Changes
+
+- jazz-react@0.8.50
+- jazz-tools@0.8.50
+- jazz-browser-media-images@0.8.50
+
+## 0.0.123
+
+### Patch Changes
+
+- jazz-react@0.8.49
+- jazz-tools@0.8.49
+- jazz-browser-media-images@0.8.49
+
+## 0.0.122
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser-media-images@0.8.48
+  - jazz-react@0.8.48
+
+## 0.0.121
+
+### Patch Changes
+
+- Updated dependencies [6f0bd7f]
+- Updated dependencies [fca6a0b]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - cojson@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-browser-media-images@0.8.45
+
+## 0.0.120
+
+### Patch Changes
+
+- Updated dependencies [5d20c81]
+  - cojson@0.8.44
+  - jazz-react@0.8.44
+  - jazz-tools@0.8.44
+  - jazz-browser-media-images@0.8.44
+
+## 0.0.119
+
+### Patch Changes
+
+- Updated dependencies [3252502]
+- Updated dependencies [6370348]
+- Updated dependencies [ac216b9]
+  - cojson@0.8.41
+  - jazz-react@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-browser-media-images@0.8.41
+
+## 0.0.118
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
 ## 0.0.117
 
 ### Patch Changes

examples/chat/README.md

@@ -34,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/main.tsx](./src/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 `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).

examples/chat/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jazz Chat Example</title>
   </head>
-  <body class="h-full">
+  <body class="h-full bg-white text-stone-700 dark:text-stone-400 dark:bg-stone-925">
     <div id="root" class="h-full"></div>
     <script type="module" src="/src/app.tsx"></script>
   </body>

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.117",
+  "version": "0.0.124",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,38 +13,25 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.4",
-    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.39",
-    "hash-slash": "workspace:0.2.1",
-    "jazz-browser-media-images": "workspace:0.8.39",
-    "jazz-react": "workspace:0.8.39",
-    "jazz-tools": "workspace:0.8.39",
+    "hash-slash": "workspace:*",
+    "jazz-browser-media-images": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
     "lucide-react": "^0.274.0",
-    "qrcode": "^1.5.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.16.0",
-    "react-router-dom": "^6.16.0",
-    "react-use": "^17.4.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7",
-    "uniqolor": "^1.1.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.46.1",
-    "@types/qrcode": "^1.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10"
   }
 }

examples/chat/src/app.tsx

@@ -1,9 +1,13 @@
 import { inIframe, onChatLoad } from "@/util.ts";
 import { useIframeHashRouter } from "hash-slash";
+import { useAccount } from "jazz-react";
 import { Group, ID } from "jazz-tools";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { ChatScreen } from "./chatScreen.tsx";
-import { useAccount } from "./main.tsx";
+import { JazzAndAuth } from "./jazz.tsx";
 import { Chat } from "./schema.ts";
+import { ThemeProvider } from "./themeProvider.tsx";
 import { AppContainer, TopBar } from "./ui.tsx";
 
 export function App() {
@@ -34,3 +38,13 @@ export function App() {
     </AppContainer>
   );
 }
+
+createRoot(document.getElementById("root")!).render(
+  <ThemeProvider>
+    <StrictMode>
+      <JazzAndAuth>
+        <App />
+      </JazzAndAuth>
+    </StrictMode>
+  </ThemeProvider>,
+);

examples/chat/src/chatScreen.tsx

@@ -1,7 +1,7 @@
 import { createImage } from "jazz-browser-media-images";
+import { useAccount, useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { useState } from "react";
-import { useAccount, useCoState } from "./main.tsx";
 import { Chat, Message } from "./schema.ts";
 import {
   BubbleBody,

examples/chat/src/index.css

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

examples/chat/src/jazz.tsx

@@ -0,0 +1,19 @@
+import { DemoAuthBasicUI, JazzProvider, useDemoAuth } from "jazz-react";
+
+export function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, state] = useDemoAuth();
+
+  return (
+    <>
+      <JazzProvider
+        auth={auth}
+        peer="wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co"
+      >
+        {children}
+      </JazzProvider>
+      {state.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Jazz Chat" state={state} />
+      )}
+    </>
+  );
+}

examples/chat/src/main.tsx

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

examples/chat/src/themeProvider.tsx

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

examples/chat/tailwind.config.js

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

examples/chat/tailwind.config.ts

@@ -0,0 +1,79 @@
+import type { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";
+const colors = require("tailwindcss/colors");
+
+const stonePalette = {
+  50: "oklch(0.988281 0.002 75)",
+  75: "oklch(0.980563 0.002 75)",
+  100: "oklch(0.964844 0.002 75)",
+  200: "oklch(0.917969 0.002 75)",
+  300: "oklch(0.853516 0.002 75)",
+  400: "oklch(0.789063 0.002 75)",
+  500: "oklch(0.726563 0.002 75)",
+  600: "oklch(0.613281 0.002 75)",
+  700: "oklch(0.523438 0.002 75)",
+  800: "oklch(0.412109 0.002 75)",
+  900: "oklch(0.302734 0.002 75)",
+  925: "oklch(0.220000 0.002 75)",
+  950: "oklch(0.193359 0.002 75)",
+} as const;
+
+const stonePaletteWithAlpha = { ...stonePalette };
+
+Object.keys(stonePalette).forEach((key) => {
+  stonePaletteWithAlpha[key] = stonePaletteWithAlpha[key].replace(
+    ")",
+    "/ <alpha-value>)",
+  );
+});
+
+const config: Config = {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        stone: stonePaletteWithAlpha,
+        blue: {
+          ...colors.indigo,
+          500: "#5870F1",
+          DEFAULT: "#3313F7",
+        },
+      },
+      container: {
+        center: true,
+        padding: {
+          DEFAULT: "0.75rem",
+          sm: "1rem",
+        },
+        screens: {
+          md: "500px",
+          lg: "500px",
+          xl: "500px",
+        },
+      },
+    },
+  },
+  plugins: [
+    plugin(({ addBase }) =>
+      addBase({
+        ":root": {
+          "--gcmp-border-color": stonePalette[200],
+          "--gcmp-invert-border-color": stonePalette[900],
+        },
+        "*": {
+          borderColor: "var(--gcmp-border-color)",
+        },
+        "@media (prefers-color-scheme: dark)": {
+          "*": {
+            borderColor: "var(--gcmp-invert-border-color)",
+          },
+        },
+        "*:focus": {
+          outline: "none",
+        },
+      }),
+    ),
+  ],
+} as const;
+
+export default config;

examples/chat/tests/chat.spec.ts

@@ -38,14 +38,11 @@ test("chat between two users", async ({ page }) => {
   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.logout();
+  await loginPage.loginAs(mario);
 
-  // await chatPage.expectLoaded();
+  await page.goto(roomURL);
 
-  // await page.goto(roomURL);
-
-  // await chatPage.expectMessageRow(message1ByMario);
-  // await chatPage.expectMessageRow(message2ByLuigi);
+  await chatPage.expectMessageRow(message1ByMario);
+  await chatPage.expectMessageRow(message2ByLuigi);
 });

examples/chat/tests/pages/LoginPage.ts

@@ -25,7 +25,7 @@ export class LoginPage {
   async loginAs(value: string) {
     await this.page
       .getByRole("button", {
-        name: `Log in as "${value}"`,
+        name: value,
       })
       .click();
   }

examples/chat/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "jazz-chat"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/clerk/CHANGELOG.md

@@ -1,5 +1,65 @@
 # minimal-auth-clerk
 
+## 0.0.23
+
+### Patch Changes
+
+- jazz-react@0.8.50
+- jazz-react-auth-clerk@0.8.50
+- jazz-tools@0.8.50
+
+## 0.0.22
+
+### Patch Changes
+
+- jazz-react@0.8.49
+- jazz-react-auth-clerk@0.8.49
+- jazz-tools@0.8.49
+
+## 0.0.21
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react@0.8.48
+  - jazz-react-auth-clerk@0.8.48
+
+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-react-auth-clerk@0.8.45
+
+## 0.0.19
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-react-auth-clerk@0.8.44
+- jazz-tools@0.8.44
+
+## 0.0.18
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-react-auth-clerk@0.8.41
+- jazz-tools@0.8.41
+
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.40
+- jazz-react-auth-clerk@0.8.40
+
 ## 0.0.16
 
 ### Patch Changes

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.16",
+  "version": "0.0.23",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
-    "jazz-tools": "workspace:*",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.8.39",
+    "jazz-react-auth-clerk": "workspace:0.8.50",
+    "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/clerk/src/App.tsx

@@ -1,4 +1,4 @@
-import { useAccount } from "./main";
+import { useAccount } from "jazz-react";
 
 function App() {
   const { me, logOut } = useAccount();

examples/clerk/src/main.tsx

@@ -1,10 +1,10 @@
 import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
-import { createJazzReactApp } from "jazz-react";
 import { useJazzClerkAuth } from "jazz-react-auth-clerk";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
+import { JazzProvider } from "jazz-react";
 
 // Import your publishable key
 const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
@@ -13,9 +13,6 @@ if (!PUBLISHABLE_KEY) {
   throw new Error("Add your Clerk publishable key to the .env.local file");
 }
 
-const Jazz = createJazzReactApp();
-export const { useAccount, useCoState } = Jazz;
-
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
   const clerk = useClerk();
   const [auth, state] = useJazzClerkAuth(clerk);
@@ -26,12 +23,12 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
         <div key={error}>{error}</div>
       ))}
       {clerk.user && auth ? (
-        <Jazz.Provider
+        <JazzProvider
           auth={auth}
           peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
         >
           {children}
-        </Jazz.Provider>
+        </JazzProvider>
       ) : (
         <SignInButton />
       )}

examples/clerk/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "clerk-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,58 @@
 # file-share-svelte
 
+## 0.0.9
+
+### Patch Changes
+
+- jazz-tools@0.8.50
+- jazz-svelte@0.8.50
+
+## 0.0.8
+
+### Patch Changes
+
+- jazz-tools@0.8.49
+- jazz-svelte@0.8.49
+
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-svelte@0.8.48
+
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-svelte@0.8.45
+
+## 0.0.5
+
+### Patch Changes
+
+- jazz-tools@0.8.44
+- jazz-svelte@0.8.44
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-tools@0.8.41
+- jazz-svelte@0.8.41
+
+## 0.0.3
+
+### Patch Changes
+
+- jazz-svelte@0.8.40
+
 ## 0.0.2
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.2",
+  "version": "0.0.9",
   "private": true,
   "type": "module",
   "scripts": {
@@ -19,23 +19,23 @@
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.5.0",
     "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
     "@types/is-ci": "^3.0.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.36.0",
-    "globals": "^15.0.0",
+    "globals": "^15.11.0",
     "is-ci": "^3.0.1",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
-    "tailwindcss": "^3.4.9",
-    "typescript": "^5.0.0",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
     "typescript-eslint": "^8.0.0",
-    "vite": "^5.0.3"
+    "vite": "^5.4.10"
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.5.15",

examples/file-share-svelte/src/lib/schema.ts

@@ -27,9 +27,7 @@ export class FileShareAccount extends Account {
   /** 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.
    */
-  async migrate(creationProps?: { name: string }) {
-    super.migrate(creationProps);
-
+  async migrate() {
     await this._refs.root?.load();
 
     // Initialize root if it doesn't exist

examples/form/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/test-results/
+/playwright-report/

examples/form/CHANGELOG.md

@@ -0,0 +1,61 @@
+# form
+
+## 0.0.19
+
+### Patch Changes
+
+- jazz-react@0.8.50
+- jazz-tools@0.8.50
+- jazz-browser-media-images@0.8.50
+
+## 0.0.18
+
+### Patch Changes
+
+- jazz-react@0.8.49
+- jazz-tools@0.8.49
+- jazz-browser-media-images@0.8.49
+
+## 0.0.17
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser-media-images@0.8.48
+  - jazz-react@0.8.48
+
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-browser-media-images@0.8.45
+
+## 0.0.15
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.0.14
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.0.13
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40

examples/form/README.md

@@ -15,6 +15,8 @@ which has the same structure as `BubbleTeaOrder`, but with all fields set to `op
 When the user is ready to submit the order, we treat `DraftBubbleTeaOrder` as a "real order" by
 converting it into a `BubbleTeaOrder`.
 
+[See the full guide here.](https://jazz.tools/docs/react/design-patterns/form)
+
 ## Installing & running the example locally
 
 (This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
@@ -47,4 +49,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/main.tsx](./src/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 `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.0.12",
+  "version": "0.0.19",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,19 +16,20 @@
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.41.5"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@playwright/test": "^1.46.1",
     "@tailwindcss/forms": "^0.5.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
+    "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "^3.4.15",
     "typescript": "~5.6.2",
     "vite": "^5.4.10"
   }

examples/form/playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * 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,
+    },
+  ],
+});

examples/form/src/App.tsx

@@ -1,9 +1,9 @@
 import { useIframeHashRouter } from "hash-slash";
+import { useAccount } from "jazz-react";
 import { ID } from "jazz-tools";
 import { CreateOrder } from "./CreateOrder.tsx";
 import { EditOrder } from "./EditOrder.tsx";
 import { Orders } from "./Orders.tsx";
-import { useAccount } from "./main";
 import { BubbleTeaOrder } from "./schema.ts";
 
 function App() {

examples/form/src/CreateOrder.tsx

@@ -1,10 +1,10 @@
 import { useIframeHashRouter } from "hash-slash";
+import { useAccount, useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { useState } from "react";
 import { Errors } from "./Errors.tsx";
 import { LinkToHome } from "./LinkToHome.tsx";
 import { OrderForm } from "./OrderForm.tsx";
-import { useAccount, useCoState } from "./main.tsx";
 import {
   BubbleTeaOrder,
   DraftBubbleTeaOrder,
@@ -12,11 +12,11 @@ import {
 } from "./schema.ts";
 
 export function CreateOrder() {
-  const { me } = useAccount({ profile: { draft: {}, orders: [] } });
+  const { me } = useAccount({ root: { draft: {}, orders: [] } });
   const router = useIframeHashRouter();
   const [errors, setErrors] = useState<string[]>([]);
 
-  if (!me?.profile) return;
+  if (!me?.root) return;
 
   const onSave = (draft: DraftBubbleTeaOrder) => {
     // validate if the draft is a valid order
@@ -27,14 +27,14 @@ export function CreateOrder() {
     }
 
     // turn the draft into a real order
-    me.profile.orders.push(draft as BubbleTeaOrder);
+    me.root.orders.push(draft as BubbleTeaOrder);
 
     // reset the draft
-    me.profile.draft = DraftBubbleTeaOrder.create(
+    me.root.draft = DraftBubbleTeaOrder.create(
       {
-        addOns: ListOfBubbleTeaAddOns.create([], { owner: me.profile._owner }),
+        addOns: ListOfBubbleTeaAddOns.create([], me),
       },
-      { owner: me.profile._owner },
+      me,
     );
 
     router.navigate("/");
@@ -50,7 +50,7 @@ export function CreateOrder() {
 
       <Errors errors={errors} />
 
-      <CreateOrderForm id={me?.profile?.draft.id} onSave={onSave} />
+      <CreateOrderForm id={me?.root?.draft.id} onSave={onSave} />
     </>
   );
 }

examples/form/src/DraftIndicator.tsx

@@ -1,11 +1,11 @@
-import { useAccount } from "./main.tsx";
+import { useAccount } from "jazz-react";
 
 export function DraftIndicator() {
   const { me } = useAccount({
-    profile: { draft: {} },
+    root: { draft: {} },
   });
 
-  if (me?.profile.draft?.hasChanges) {
+  if (me?.root.draft?.hasChanges) {
     return (
       <div className="absolute -top-1 -right-1 bg-blue-500 border-2 border-white w-3 h-3 rounded-full dark:border-stone-925">
         <span className="sr-only">You have a draft</span>

examples/form/src/EditOrder.tsx

@@ -1,8 +1,8 @@
+import { useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { LinkToHome } from "./LinkToHome.tsx";
 import { OrderForm } from "./OrderForm.tsx";
 import { OrderThumbnail } from "./OrderThumbnail.tsx";
-import { useCoState } from "./main.tsx";
 import { BubbleTeaOrder } from "./schema.ts";
 
 export function EditOrder(props: { id: ID<BubbleTeaOrder> }) {

examples/form/src/Orders.tsx

@@ -1,10 +1,10 @@
+import { useAccount } from "jazz-react";
 import { DraftIndicator } from "./DraftIndicator.tsx";
 import { OrderThumbnail } from "./OrderThumbnail.tsx";
-import { useAccount } from "./main.tsx";
 
 export function Orders() {
   const { me } = useAccount({
-    profile: { orders: [] },
+    root: { orders: [] },
   });
 
   return (
@@ -22,8 +22,9 @@ export function Orders() {
           <h1 className="text-lg pb-2 border-b mb-3">
             <strong>Your orders 🧋</strong>
           </h1>
-          {me?.profile?.orders?.length ? (
-            me?.profile?.orders.map((order) =>
+
+          {me?.root?.orders?.length ? (
+            me?.root?.orders.map((order) =>
               order ? <OrderThumbnail key={order.id} order={order} /> : null,
             )
           ) : (

examples/form/src/main.tsx

@@ -1,27 +1,22 @@
-import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+import { DemoAuthBasicUI, JazzProvider, 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
+      <JazzProvider
         auth={auth}
         peer="wss://cloud.jazz.tools/?key=form-example@garden.co"
+        AccountSchema={JazzAccount}
       >
         {children}
-      </Jazz.Provider>
+      </JazzProvider>
 
       {authState.state !== "signedIn" && (
         <DemoAuthBasicUI appName="Form" state={authState} />
@@ -30,6 +25,12 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
   );
 }
 
+declare module "jazz-react" {
+  interface Register {
+    Account: JazzAccount;
+  }
+}
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <JazzAndAuth>

examples/form/src/schema.ts

@@ -1,4 +1,4 @@
-import { Account, CoList, CoMap, Profile, co } from "jazz-tools";
+import { Account, CoList, CoMap, co } from "jazz-tools";
 
 export const BubbleTeaAddOnTypes = [
   "Pearl",
@@ -59,28 +59,29 @@ export class DraftBubbleTeaOrder extends CoMap {
 
 export class ListOfBubbleTeaOrders extends CoList.Of(co.ref(BubbleTeaOrder)) {}
 
-/** The profile is an app-specific per-user public `CoMap`
+/** The root is an app-specific per-user private `CoMap`
  *  where you can store top-level objects for that user */
-export class JazzProfile extends Profile {
+export class AccountRoot extends CoMap {
   draft = co.ref(DraftBubbleTeaOrder);
   orders = co.ref(ListOfBubbleTeaOrders);
 }
 
 export class JazzAccount extends Account {
-  profile = co.ref(JazzProfile)!;
+  root = co.ref(AccountRoot);
 
-  migrate(this: JazzAccount, creationProps?: { name: string }) {
-    super.migrate(creationProps);
+  migrate() {
+    const account = this;
 
-    if (!this.profile._refs.orders) {
-      const owner = this.profile._owner;
-      this.profile.orders = ListOfBubbleTeaOrders.create([], { owner });
-      this.profile.draft = DraftBubbleTeaOrder.create(
+    if (!this._refs.root) {
+      const orders = ListOfBubbleTeaOrders.create([], account);
+      const draft = DraftBubbleTeaOrder.create(
         {
-          addOns: ListOfBubbleTeaAddOns.create([], { owner }),
+          addOns: ListOfBubbleTeaAddOns.create([], account),
         },
-        { owner },
+        account,
       );
+
+      this.root = AccountRoot.create({ draft, orders }, account);
     }
   }
 }

examples/form/tailwind.config.ts

@@ -1,4 +1,6 @@
-const plugin = require("tailwindcss/plugin");
+import formsPlugin from "@tailwindcss/forms";
+import type { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";
 
 const stonePalette = {
   50: "oklch(0.988281 0.002 75)",
@@ -14,7 +16,7 @@ const stonePalette = {
   900: "oklch(0.302734 0.002 75)",
   925: "oklch(0.220000 0.002 75)",
   950: "oklch(0.193359 0.002 75)",
-};
+} as const;
 
 const stonePaletteWithAlpha = { ...stonePalette };
 
@@ -25,7 +27,7 @@ Object.keys(stonePalette).forEach((key) => {
   );
 });
 
-const config = {
+const config: Config = {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
@@ -47,7 +49,7 @@ const config = {
     },
   },
   plugins: [
-    require("@tailwindcss/forms"),
+    formsPlugin,
     plugin(({ addBase }) =>
       addBase({
         ":root": {
@@ -68,5 +70,6 @@ const config = {
       }),
     ),
   ],
-};
+} as const;
+
 export default config;

examples/form/tests/form.spec.ts

@@ -0,0 +1,56 @@
+import { expect, test } from "@playwright/test";
+import { LoginPage } from "./pages/LoginPage";
+
+test("create and edit an order", async ({ page }) => {
+  const loginPage = new LoginPage(page);
+
+  await loginPage.goto();
+  await loginPage.fillUsername("Alice");
+  await loginPage.signup();
+
+  // start an order
+  await page.getByRole("link", { name: "Add new order" }).click();
+  await page.getByLabel("Base tea").selectOption("Oolong");
+
+  // test draft indicator
+  await page.getByRole("link", { name: /Back to all orders/ }).click();
+  await expect(page.getByText("You have a draft")).toBeVisible();
+
+  // fill out the rest of order form
+  await page.getByRole("link", { name: "Add new order" }).click();
+  await page.getByLabel("Pearl").check();
+  await page.getByLabel("Taro").check();
+  await page.getByLabel("Delivery date").fill("2024-12-21");
+  await page.getByLabel("With milk?").check();
+  await page.getByLabel("Special instructions").fill("25% sugar");
+  await page.getByRole("button", { name: "Submit" }).click();
+
+  await page.waitForURL("/");
+
+  // the draft indicator should be gone because the order was submitted
+  await expect(page.getByText("You have a draft")).toHaveCount(0);
+
+  // check if order was created correctly
+  const firstOrder = page.getByRole("link", { name: "Oolong milk tea" });
+  await expect(firstOrder).toHaveText(/25% sugar/);
+  await expect(firstOrder).toHaveText(/12\/21\/2024/);
+  await expect(firstOrder).toHaveText(/with pearl, taro/);
+
+  // edit order
+  await firstOrder.click();
+  await page.getByLabel("Base tea").selectOption("Jasmine");
+  await page.getByLabel("Red bean").check();
+  await page.getByLabel("Brown sugar").check();
+  await page.getByLabel("Delivery date").fill("2024-12-25");
+  await page.getByLabel("With milk?").uncheck();
+  await page.getByLabel("Special instructions").fill("10% sugar");
+  await page.getByRole("link", { name: /Back to all orders/ }).click();
+
+  // check if order was edited correctly
+  const editedOrder = page.getByRole("link", { name: "Jasmine tea" });
+  await expect(editedOrder).toHaveText(/10% sugar/);
+  await expect(editedOrder).toHaveText(/12\/25\/2024/);
+  await expect(editedOrder).toHaveText(
+    /with pearl, taro, red bean, brown sugar/,
+  );
+});

examples/form/tests/pages/LoginPage.ts

@@ -0,0 +1,40 @@
+import { Locator, Page, 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: value,
+      })
+      .click();
+  }
+
+  async signup() {
+    await this.signupButton.click();
+  }
+
+  async expectLoaded() {
+    await expect(this.signupButton).toBeVisible();
+  }
+}

examples/form/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/createorder.tsx","./src/draftindicator.tsx","./src/editorder.tsx","./src/errors.tsx","./src/linktohome.tsx","./src/orderform.tsx","./src/orderthumbnail.tsx","./src/orders.tsx","./src/main.tsx","./src/schema.ts","./src/vite-env.d.ts"],"version":"5.6.3"}

examples/form/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "form-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/form/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

examples/form/vite.config.js

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

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,65 @@
 # image-upload
 
+## 0.0.21
+
+### Patch Changes
+
+- jazz-react@0.8.50
+- jazz-tools@0.8.50
+- jazz-browser-media-images@0.8.50
+
+## 0.0.20
+
+### Patch Changes
+
+- jazz-react@0.8.49
+- jazz-tools@0.8.49
+- jazz-browser-media-images@0.8.49
+
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser-media-images@0.8.48
+  - jazz-react@0.8.48
+
+## 0.0.18
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-browser-media-images@0.8.45
+
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.0.16
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.0.15
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
 ## 0.0.14
 
 ### Patch Changes

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.14",
+  "version": "0.0.21",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/image-upload/src/App.tsx

@@ -1,5 +1,5 @@
+import { useAccount } from "jazz-react";
 import ImageUpload from "./ImageUpload.tsx";
-import { useAccount } from "./main";
 
 function App() {
   const { me, logOut } = useAccount();

examples/image-upload/src/ImageUpload.tsx

@@ -1,8 +1,7 @@
 import { createImage } from "jazz-browser-media-images";
-import { ProgressiveImg } from "jazz-react";
+import { ProgressiveImg, useAccount } from "jazz-react";
 import { ImageDefinition } from "jazz-tools";
 import { ChangeEvent, useRef } from "react";
-import { useAccount } from "./main.tsx";
 
 function Image({ image }: { image: ImageDefinition }) {
   return (

examples/image-upload/src/main.tsx

@@ -1,27 +1,22 @@
-import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+import { DemoAuthBasicUI, JazzProvider, 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
+      <JazzProvider
         auth={auth}
         peer="wss://cloud.jazz.tools/?key=image-upload-example@garden.co"
+        AccountSchema={JazzAccount}
       >
         {children}
-      </Jazz.Provider>
+      </JazzProvider>
 
       {authState.state !== "signedIn" && (
         <DemoAuthBasicUI appName="Image upload" state={authState} />
@@ -30,6 +25,12 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
   );
 }
 
+declare module "jazz-react" {
+  interface Register {
+    Account: JazzAccount;
+  }
+}
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <JazzAndAuth>

examples/image-upload/src/schema.ts

@@ -10,7 +10,5 @@ export class JazzAccount extends Account {
   /** 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);
-  }
+  migrate(this: JazzAccount) {}
 }

examples/image-upload/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "image-upload-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/inspector/CHANGELOG.md

@@ -1,5 +1,57 @@
 # jazz-example-inspector
 
+## 0.0.92
+
+### Patch Changes
+
+- Updated dependencies [43378ef]
+  - cojson@0.8.50
+  - cojson-transport-ws@0.8.50
+
+## 0.0.91
+
+### Patch Changes
+
+- Updated dependencies [25dfd90]
+  - cojson@0.8.49
+  - cojson-transport-ws@0.8.49
+
+## 0.0.90
+
+### Patch Changes
+
+- Updated dependencies [10ea733]
+  - cojson@0.8.48
+  - cojson-transport-ws@0.8.48
+
+## 0.0.89
+
+### Patch Changes
+
+- Updated dependencies [6f0bd7f]
+- Updated dependencies [fca6a0b]
+- Updated dependencies [88d7d9a]
+  - cojson@0.8.45
+  - cojson-transport-ws@0.8.45
+
+## 0.0.88
+
+### Patch Changes
+
+- Updated dependencies [5d20c81]
+  - cojson@0.8.44
+  - cojson-transport-ws@0.8.44
+
+## 0.0.87
+
+### Patch Changes
+
+- Updated dependencies [3252502]
+- Updated dependencies [6370348]
+- Updated dependencies [ac216b9]
+  - cojson@0.8.41
+  - cojson-transport-ws@0.8.41
+
 ## 0.0.86
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.86",
+  "version": "0.0.92",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,13 +16,13 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.39",
-    "cojson-transport-ws": "workspace:0.8.39",
+    "cojson": "workspace:0.8.50",
+    "cojson-transport-ws": "workspace:0.8.50",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
     "react-use": "^17.4.0",
@@ -32,13 +32,13 @@
   },
   "devDependencies": {
     "@types/qrcode": "^1.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.20",
     "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10"
   }
 }