feat: change the peer & localOnly props into sync

feat: update the React Native packages with the new auth system

.changeset/stupid-tigers-relate.md

@@ -1,7 +0,0 @@
----
-"jazz-react-native": patch
----
-
-Fix username key hashing in DemoAuth
-Improve error handling when loading an existing account fails
-Fix the double context creation in Reacc development mode

.changeset/tiny-trains-vanish.md

@@ -1,5 +0,0 @@
----
-"cojson": patch
----
-
-Add the assign method to RawCoMap to create bulk transactions and optimize RawCoMap init

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding"]
+        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding", "starters/react-demo-auth-tailwind"]
 
     steps:
       - uses: actions/checkout@v3

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,194 @@
 # chat-rn-clerk
 
+## 1.0.61
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-react-native@0.9.20
+  - jazz-react-native-auth-clerk@0.9.20
+  - jazz-react-native-media-images@0.9.20
+
+## 1.0.60
+
+### Patch Changes
+
+- jazz-react-native@0.9.19
+- jazz-react-native-auth-clerk@0.9.19
+- jazz-tools@0.9.19
+- jazz-react-native-media-images@0.9.19
+
+## 1.0.59
+
+### Patch Changes
+
+- jazz-react-native@0.9.18
+- jazz-react-native-auth-clerk@0.9.18
+- jazz-tools@0.9.18
+- jazz-react-native-media-images@0.9.18
+
+## 1.0.58
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-react-native@0.9.17
+  - jazz-react-native-auth-clerk@0.9.17
+  - jazz-react-native-media-images@0.9.17
+
+## 1.0.57
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-react-native-auth-clerk@0.9.16
+  - jazz-tools@0.9.16
+  - jazz-react-native@0.9.16
+  - jazz-react-native-media-images@0.9.16
+
+## 1.0.56
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-react-native@0.9.15
+  - jazz-react-native-auth-clerk@0.9.15
+  - jazz-react-native-media-images@0.9.15
+
+## 1.0.55
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-react-native@0.9.14
+  - jazz-react-native-auth-clerk@0.9.14
+  - jazz-react-native-media-images@0.9.14
+
+## 1.0.54
+
+### Patch Changes
+
+- jazz-react-native@0.9.13
+- jazz-react-native-auth-clerk@0.9.13
+- jazz-tools@0.9.13
+- jazz-react-native-media-images@0.9.13
+
+## 1.0.53
+
+### Patch Changes
+
+- jazz-react-native@0.9.12
+- jazz-react-native-auth-clerk@0.9.12
+- jazz-tools@0.9.12
+- jazz-react-native-media-images@0.9.12
+
+## 1.0.52
+
+### Patch Changes
+
+- jazz-react-native@0.9.11
+- jazz-react-native-auth-clerk@0.9.11
+- jazz-tools@0.9.11
+- jazz-react-native-media-images@0.9.11
+
+## 1.0.51
+
+### Patch Changes
+
+- f76274c: Fix image handling in react-native
+- Updated dependencies [f76274c]
+- Updated dependencies [5e83864]
+  - jazz-react-native@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-react-native-auth-clerk@0.9.10
+  - jazz-react-native-media-images@0.9.10
+
+## 1.0.50
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-react-native@0.9.9
+  - jazz-react-native-auth-clerk@0.9.9
+  - jazz-react-native-media-images@0.9.9
+
+## 1.0.49
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react-native@0.9.8
+  - jazz-react-native-auth-clerk@0.9.8
+  - jazz-react-native-media-images@0.9.8
+
+## 1.0.48
+
+### Patch Changes
+
+- Updated dependencies [8a390d2]
+  - jazz-react-native@0.9.6
+  - jazz-react-native-auth-clerk@0.9.6
+
+## 1.0.47
+
+### Patch Changes
+
+- Updated dependencies [c871912]
+  - jazz-react-native@0.9.5
+  - jazz-react-native-auth-clerk@0.9.5
+
+## 1.0.46
+
+### Patch Changes
+
+- jazz-react-native@0.9.4
+- jazz-react-native-auth-clerk@0.9.4
+
+## 1.0.45
+
+### Patch Changes
+
+- Updated dependencies [7cd691f]
+  - jazz-react-native@0.9.3
+  - jazz-react-native-auth-clerk@0.9.3
+
+## 1.0.44
+
+### Patch Changes
+
+- Updated dependencies [80fd3e9]
+  - jazz-react-native@0.9.2
+  - jazz-react-native-auth-clerk@0.9.2
+
+## 1.0.43
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-tools@0.9.1
+  - jazz-react-native@0.9.1
+  - jazz-react-native-auth-clerk@0.9.1
+  - jazz-react-native-media-images@0.9.1
+
+## 1.0.42
+
+### Patch Changes
+
+- Updated dependencies [1da4d55]
+- Updated dependencies [8eda792]
+- Updated dependencies [1e5e3a1]
+  - jazz-react-native@0.9.0
+  - jazz-tools@0.9.0
+  - jazz-react-native-auth-clerk@0.9.0
+  - jazz-react-native-media-images@0.9.0
+
 ## 1.0.41
 
 ### Patch Changes

examples/chat-rn-clerk/app.json

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

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

@@ -1,9 +1,9 @@
 import { Redirect, Stack } from "expo-router";
+import { useIsAuthenticated } from "jazz-react-native";
 import React from "react";
-import { useAuth } from "../../src/auth-context";
 
 export default function HomeLayout() {
-  const { isAuthenticated } = useAuth();
+  const isAuthenticated = useIsAuthenticated();
 
   if (isAuthenticated) {
     return <Redirect href={"/chat"} />;

examples/chat-rn-clerk/app/(auth)/_layout.tsx

@@ -1,8 +1,8 @@
 import { Redirect, Stack } from "expo-router";
-import { useAuth } from "../../src/auth-context";
+import { useIsAuthenticated } from "jazz-react-native";
 
 export default function UnAuthenticatedLayout() {
-  const { isAuthenticated } = useAuth();
+  const isAuthenticated = useIsAuthenticated();
 
   if (isAuthenticated) {
     return <Redirect href={"/chat"} />;

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

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

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

@@ -11,7 +11,7 @@ import React, {
 } from "react-native";
 
 import { useUser } from "@clerk/clerk-expo";
-import { useAccount } from "../../src/jazz";
+import { useAccount } from "jazz-react-native";
 import { Chat } from "../../src/schema";
 
 export default function ChatScreen() {
@@ -20,10 +20,15 @@ export default function ChatScreen() {
   const navigation = useNavigation();
   const { user } = useUser();
 
+  function handleLogOut() {
+    logOut();
+    router.navigate("/");
+  }
+
   useLayoutEffect(() => {
     navigation.setOptions({
       headerTitle: "Chat",
-      headerRight: () => <Button onPress={logOut} title="Logout" />,
+      headerRight: () => <Button onPress={handleLogOut} title="Logout" />,
     });
   }, [navigation]);
 

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.41",
+  "version": "1.0.61",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -20,6 +20,7 @@
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.2.21",
     "@expo/vector-icons": "^14.0.2",
+    "@op-engineering/op-sqlite": "^11.2.12",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-navigation/native": "^7.0.13",
     "@react-navigation/native-stack": "^7.1.14",
@@ -34,6 +35,7 @@
     "expo-dev-client": "~5.0.5",
     "expo-file-system": "^18.0.4",
     "expo-font": "~13.0.1",
+    "expo-image-picker": "~16.0.4",
     "expo-linking": "~7.0.3",
     "expo-router": "~4.0.11",
     "expo-secure-store": "~14.0.0",

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

@@ -1,62 +1,20 @@
-import { useClerk, useUser } from "@clerk/clerk-expo";
+import { useClerk } from "@clerk/clerk-expo";
-import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
+import { JazzProviderWithClerk } from "jazz-react-native-auth-clerk";
-import React, {
+import React, { PropsWithChildren } from "react";
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-import { Text, View } from "react-native";
-import { Jazz, kvStore } from "./jazz";
-
-const AuthContext = createContext<{
-  isAuthenticated: boolean;
-  isLoading: boolean;
-}>({
-  isAuthenticated: false,
-  isLoading: true,
-});
-
-export function useAuth() {
-  return useContext(AuthContext);
-}
 
 export function JazzAndAuth({ children }: PropsWithChildren) {
-  const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
   const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk, kvStore);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-  useEffect(() => {
-    if (isSignedIn && isClerkLoaded && auth) {
-      setIsAuthenticated(true);
-    } else {
-      setIsAuthenticated(false);
-    }
-  }, [isSignedIn, isClerkLoaded, auth]);
 
   return (
-    <AuthContext.Provider
+    <JazzProviderWithClerk
-      value={{ isAuthenticated, isLoading: !isClerkLoaded || !auth }}
+      clerk={clerk}
+      storage="sqlite"
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co",
+        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
+      }}
     >
-      {state?.errors?.length > 0 &&
+      {children}
-        state.errors.map((error) => (
+    </JazzProviderWithClerk>
-          <View key={error}>
-            <Text style={{ color: "red" }}>{error}</Text>
-          </View>
-        ))}
-      {auth && clerk.user ? (
-        <Jazz.Provider
-          auth={auth}
-          peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
-          storage={undefined}
-        >
-          {children}
-        </Jazz.Provider>
-      ) : (
-        children
-      )}
-    </AuthContext.Provider>
   );
 }

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/src/schema.ts

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

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,158 @@
 # chat-rn
 
+## 1.0.58
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-react-native@0.9.20
+
+## 1.0.57
+
+### Patch Changes
+
+- jazz-react-native@0.9.19
+- jazz-tools@0.9.19
+
+## 1.0.56
+
+### Patch Changes
+
+- jazz-react-native@0.9.18
+- jazz-tools@0.9.18
+
+## 1.0.55
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-react-native@0.9.17
+
+## 1.0.54
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-tools@0.9.16
+  - jazz-react-native@0.9.16
+
+## 1.0.53
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-react-native@0.9.15
+
+## 1.0.52
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-react-native@0.9.14
+
+## 1.0.51
+
+### Patch Changes
+
+- jazz-react-native@0.9.13
+- jazz-tools@0.9.13
+
+## 1.0.50
+
+### Patch Changes
+
+- jazz-react-native@0.9.12
+- jazz-tools@0.9.12
+
+## 1.0.49
+
+### Patch Changes
+
+- jazz-react-native@0.9.11
+- jazz-tools@0.9.11
+
+## 1.0.48
+
+### Patch Changes
+
+- Updated dependencies [f76274c]
+- Updated dependencies [5e83864]
+  - jazz-react-native@0.9.10
+  - jazz-tools@0.9.10
+
+## 1.0.47
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-react-native@0.9.9
+
+## 1.0.46
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react-native@0.9.8
+
+## 1.0.45
+
+### Patch Changes
+
+- Updated dependencies [8a390d2]
+  - jazz-react-native@0.9.6
+
+## 1.0.44
+
+### Patch Changes
+
+- Updated dependencies [c871912]
+  - jazz-react-native@0.9.5
+
+## 1.0.43
+
+### Patch Changes
+
+- jazz-react-native@0.9.4
+
+## 1.0.42
+
+### Patch Changes
+
+- Updated dependencies [7cd691f]
+  - jazz-react-native@0.9.3
+
+## 1.0.41
+
+### Patch Changes
+
+- Updated dependencies [80fd3e9]
+  - jazz-react-native@0.9.2
+
+## 1.0.40
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-tools@0.9.1
+  - jazz-react-native@0.9.1
+
+## 1.0.39
+
+### Patch Changes
+
+- Updated dependencies [1da4d55]
+- Updated dependencies [8eda792]
+- Updated dependencies [1e5e3a1]
+  - jazz-react-native@0.9.0
+  - jazz-tools@0.9.0
+
 ## 1.0.38
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.38",
+  "version": "1.0.58",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
+    "@op-engineering/op-sqlite": "^11.2.12",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-navigation/native": "^7.0.13",
     "@react-navigation/native-stack": "^7.1.14",

examples/chat-rn/src/App.tsx

@@ -9,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 { JazzProvider } from "jazz-react-native";
 import ChatScreen from "./chat";
-import { Jazz } from "./jazz";
 
 const Stack = createNativeStackNavigator();
 
@@ -29,12 +28,10 @@ const linking = {
 };
 
 function App() {
-  const [auth, state] = useDemoAuth();
   const [initialRoute, setInitialRoute] = useState<
     "ChatScreen" | "HandleInviteScreen"
   >("ChatScreen");
   const navigationRef = useNavigationContainerRef();
-
   useEffect(() => {
     Linking.getInitialURL().then((url) => {
       if (url) {
@@ -45,16 +42,13 @@ function App() {
     });
   }, []);
 
-  if (!auth) {
-    return null;
-  }
-
   return (
     <StrictMode>
-      <Jazz.Provider
+      <JazzProvider
-        auth={auth}
+        storage="sqlite"
-        peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
+        sync={{
-        storage={undefined}
+          peer: "wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co",
+        }}
       >
         <NavigationContainer linking={linking} ref={navigationRef}>
           <Stack.Navigator initialRouteName={initialRoute}>
@@ -70,10 +64,7 @@ function App() {
             />
           </Stack.Navigator>
         </NavigationContainer>
-      </Jazz.Provider>
+      </JazzProvider>
-      {state.state !== "signedIn" ? (
-        <DemoAuthBasicUI appName="Jazz Chat" state={state} />
-      ) : null}
     </StrictMode>
   );
 }

examples/chat-rn/src/chat.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import * as Clipboard from "expo-clipboard";
-import { Group, ID } from "jazz-tools";
+import { Group, ID, Profile } from "jazz-tools";
 import { useEffect, useState } from "react";
 import React, {
   Button,
@@ -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 }) {
@@ -22,10 +22,16 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
   const [chatId, setChatId] = useState<ID<Chat>>();
   const loadedChat = useCoState(Chat, chatId, [{}]);
   const [message, setMessage] = useState("");
+  const profile = useCoState(Profile, me._refs.profile?.id, {});
+
+  function handleLogOut() {
+    setChatId(undefined);
+    logOut();
+  }
 
   useEffect(() => {
     navigation.setOptions({
-      headerRight: () => <Button onPress={logOut} title="Logout" />,
+      headerRight: () => <Button onPress={handleLogOut} title="Logout" />,
       headerLeft: () =>
         loadedChat ? (
           <Button
@@ -131,6 +137,18 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
     <View className="flex flex-col h-full">
       {!loadedChat ? (
         <View className="flex flex-col h-full items-center justify-center">
+          <Text className="text-m font-bold mb-6">Username</Text>
+          <TextInput
+            className="rounded h-12 p-2 mb-12 w-40 border border-gray-200 block"
+            value={profile?.name ?? ""}
+            onChangeText={(value) => {
+              if (profile) {
+                profile.name = value;
+              }
+            }}
+            textAlignVertical="center"
+            onSubmitEditing={sendMessage}
+          />
           <TouchableOpacity
             onPress={createChat}
             className="bg-blue-500 p-4 rounded-md"

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-vue/CHANGELOG.md

@@ -1,5 +1,138 @@
 # chat-vue
 
+## 0.0.45
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-browser@0.9.20
+  - jazz-vue@0.9.20
+
+## 0.0.44
+
+### Patch Changes
+
+- jazz-browser@0.9.19
+- jazz-tools@0.9.19
+- jazz-vue@0.9.19
+
+## 0.0.43
+
+### Patch Changes
+
+- jazz-browser@0.9.18
+- jazz-tools@0.9.18
+- jazz-vue@0.9.18
+
+## 0.0.42
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-browser@0.9.17
+  - jazz-vue@0.9.17
+
+## 0.0.41
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-tools@0.9.16
+  - jazz-browser@0.9.16
+  - jazz-vue@0.9.16
+
+## 0.0.40
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-browser@0.9.15
+  - jazz-vue@0.9.15
+
+## 0.0.39
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-browser@0.9.14
+  - jazz-vue@0.9.14
+
+## 0.0.38
+
+### Patch Changes
+
+- jazz-browser@0.9.13
+- jazz-tools@0.9.13
+- jazz-vue@0.9.13
+
+## 0.0.37
+
+### Patch Changes
+
+- jazz-browser@0.9.12
+- jazz-tools@0.9.12
+- jazz-vue@0.9.12
+
+## 0.0.36
+
+### Patch Changes
+
+- jazz-browser@0.9.11
+- jazz-tools@0.9.11
+- jazz-vue@0.9.11
+
+## 0.0.35
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-tools@0.9.10
+  - jazz-browser@0.9.10
+  - jazz-vue@0.9.10
+
+## 0.0.34
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-browser@0.9.9
+  - jazz-vue@0.9.9
+
+## 0.0.33
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-browser@0.9.8
+  - jazz-vue@0.9.8
+
+## 0.0.32
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+- Updated dependencies [5d98189]
+  - jazz-browser@0.9.1
+  - jazz-tools@0.9.1
+  - jazz-vue@0.9.1
+
+## 0.0.31
+
+### Patch Changes
+
+- Updated dependencies [9dd8d95]
+- Updated dependencies [8eda792]
+  - jazz-vue@0.9.0
+  - jazz-tools@0.9.0
+  - jazz-browser@0.9.0
+
 ## 0.0.30
 
 ### Patch Changes

examples/chat-vue/README.md

@@ -1,29 +1,55 @@
 # Chat example with Jazz and Vue
 
-## Installing & running the example locally
+## Getting started
 
-(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
 
-Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
 ```bash
-npx degit gardencmp/jazz jazz
+npx create-jazz-app@latest --example chat-vue --project-name chat-vue
 ```
 
-Go to the todo-vue example directory:
+Go to the new project directory.
 ```bash
-cd jazz/examples/chat-vue
+cd chat-vue
 ```
 
-Install and build dependencies:
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
 ```bash
 pnpm i && npx turbo build
 ```
 
-Start the dev server:
+Go to the example directory.
+```bash
+cd jazz/examples/chat-vue/
+```
+
+Start the dev server.
 ```bash
 pnpm dev
 ```
 
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
 ## Questions / problems / feedback
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.

examples/chat-vue/package.json

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

examples/chat-vue/src/App.vue

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

examples/chat-vue/src/main.ts

@@ -1,36 +1,30 @@
-import { DemoAuthBasicUI, createJazzVueApp, useDemoAuth } from "jazz-vue";
+import { DemoAuthBasicUI, JazzProvider } from "jazz-vue";
 import { createApp, defineComponent, h } from "vue";
 import App from "./App.vue";
 import "./index.css";
 import router from "./router";
 
-const Jazz = createJazzVueApp();
-export const { useAccount, useCoState } = Jazz;
-const { JazzProvider } = Jazz;
-
 const RootComponent = defineComponent({
   name: "RootComponent",
   setup() {
-    const { authMethod, state } = useDemoAuth();
+    return () =>
-
-    return () => [
       h(
         JazzProvider,
         {
-          auth: authMethod.value,
+          sync: {
-          peer: "wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co",
+            peer: "wss://cloud.jazz.tools/?key=vue-todo-example-jazz@garden.co",
+          },
         },
-        {
+        h(
-          default: () => h(App),
+          DemoAuthBasicUI,
-        },
+          {
-      ),
+            appName: "Jazz Vue Chat",
-
+          },
-      state.state !== "signedIn" &&
+          {
-        h(DemoAuthBasicUI, {
+            default: () => h(App),
-          appName: "Jazz Chat",
+          },
-          state,
+        ),
-        }),
+      );
-    ];
   },
 });
 

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

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

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

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,144 @@
 # jazz-example-chat
 
+## 0.0.141
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-browser-media-images@0.9.20
+  - jazz-react@0.9.20
+
+## 0.0.140
+
+### Patch Changes
+
+- jazz-react@0.9.19
+- jazz-tools@0.9.19
+- jazz-browser-media-images@0.9.19
+
+## 0.0.139
+
+### Patch Changes
+
+- jazz-react@0.9.18
+- jazz-tools@0.9.18
+- jazz-browser-media-images@0.9.18
+
+## 0.0.138
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-browser-media-images@0.9.17
+  - jazz-react@0.9.17
+
+## 0.0.137
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-tools@0.9.16
+  - jazz-browser-media-images@0.9.16
+  - jazz-react@0.9.16
+
+## 0.0.136
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-browser-media-images@0.9.15
+  - jazz-react@0.9.15
+
+## 0.0.135
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-browser-media-images@0.9.14
+  - jazz-react@0.9.14
+
+## 0.0.134
+
+### Patch Changes
+
+- jazz-react@0.9.13
+- jazz-tools@0.9.13
+- jazz-browser-media-images@0.9.13
+
+## 0.0.133
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.132
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.131
+
+### Patch Changes
+
+- f76274c: Fix image handling in react-native
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
+## 0.0.130
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-browser-media-images@0.9.9
+  - jazz-react@0.9.9
+
+## 0.0.129
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react@0.9.8
+  - jazz-browser-media-images@0.9.8
+
+## 0.0.128
+
+### Patch Changes
+
+- jazz-react@0.9.4
+
+## 0.0.127
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-react@0.9.1
+  - jazz-tools@0.9.1
+  - jazz-browser-media-images@0.9.1
+
+## 0.0.126
+
+### Patch Changes
+
+- Updated dependencies [956a4d1]
+- Updated dependencies [8eda792]
+  - jazz-react@0.9.0
+  - jazz-tools@0.9.0
+  - jazz-browser-media-images@0.9.0
+
 ## 0.0.125
 
 ### Patch Changes

examples/chat/README.md

@@ -2,30 +2,56 @@
 
 Live version: [https://chat.jazz.tools](https://chat.jazz.tools)
 
-## Installing & running the example locally
+## Getting started
 
-(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
 
-Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
 ```bash
-npx degit gardencmp/jazz jazz
+npx create-jazz-app@latest --example chat --project-name chat
 ```
 
-Go to the chat example directory:
+Go to the new project directory.
 ```bash
-cd jazz/examples/chat
+cd chat
 ```
 
-Install and build dependencies:
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
 ```bash
 pnpm i && npx turbo build
 ```
 
-Start the dev server:
+Go to the example directory.
+```bash
+cd jazz/examples/chat/
+```
+
+Start the dev server.
 ```bash
 pnpm dev
 ```
 
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
 ## Questions / problems / feedback
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
@@ -34,4 +60,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.125",
+  "version": "0.0.141",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/chat/src/app.tsx

@@ -1,9 +1,12 @@
-import { inIframe, onChatLoad } from "@/util.ts";
+import { getRandomUsername, inIframe, onChatLoad } from "@/util.ts";
 import { useIframeHashRouter } from "hash-slash";
+import { JazzProvider, 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 { Chat } from "./schema.ts";
+import { ThemeProvider } from "./themeProvider.tsx";
 import { AppContainer, TopBar } from "./ui.tsx";
 
 export function App() {
@@ -12,9 +15,9 @@ export function App() {
 
   const createChat = () => {
     if (!me) return;
-    const group = Group.create({ owner: me });
+    const group = Group.create();
     group.addMember("everyone", "writer");
-    const chat = Chat.create([], { owner: group });
+    const chat = Chat.create([], group);
     router.navigate("/#/chat/" + chat.id);
 
     // for https://jazz.tools marketing site demo only
@@ -24,7 +27,15 @@ export function App() {
   return (
     <AppContainer>
       <TopBar>
-        <p>{me?.profile?.name}</p>
+        <input
+          type="text"
+          value={me?.profile?.name ?? ""}
+          onChange={(e) => {
+            if (!me?.profile) return;
+            me.profile.name = e.target.value;
+          }}
+          placeholder="Set username"
+        />
         {!inIframe && <button onClick={logOut}>Log out</button>}
       </TopBar>
       {router.route({
@@ -34,3 +45,21 @@ export function App() {
     </AppContainer>
   );
 }
+
+const url = new URL(window.location.href);
+const defaultProfileName = url.searchParams.get("user") ?? getRandomUsername();
+
+createRoot(document.getElementById("root")!).render(
+  <ThemeProvider>
+    <StrictMode>
+      <JazzProvider
+        sync={{
+          peer: "wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co",
+        }}
+        defaultProfileName={defaultProfileName}
+      >
+        <App />
+      </JazzProvider>
+    </StrictMode>
+  </ThemeProvider>,
+);

examples/chat/src/chatScreen.tsx

@@ -1,7 +1,7 @@
 import { createImage } from "jazz-browser-media-images";
+import { 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,
@@ -18,7 +18,6 @@ import {
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
   const chat = useCoState(Chat, props.chatID, [{}]);
-  const { me } = useAccount();
   const [showNLastMessages, setShowNLastMessages] = useState(30);
 
   if (!chat)
@@ -27,8 +26,6 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
     );
 
   const sendImage = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!me?.profile) return;
-
     const file = event.currentTarget.files?.[0];
 
     if (!file) return;
@@ -39,12 +36,7 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
     }
 
     createImage(file, { owner: chat._owner }).then((image) => {
-      chat.push(
+      chat.push(Message.create({ text: file.name, image: image }, chat._owner));
-        Message.create(
-          { text: file.name, image: image },
-          { owner: chat._owner },
-        ),
-      );
     });
   };
 

examples/chat/src/main.tsx

@@ -1,36 +0,0 @@
-import { ThemeProvider } from "@/themeProvider.tsx";
-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(
-  <ThemeProvider>
-    <StrictMode>
-      <JazzAndAuth>
-        <App />
-      </JazzAndAuth>
-    </StrictMode>
-  </ThemeProvider>,
-);

examples/chat/src/util.ts

@@ -15,3 +15,20 @@ export function onChatLoad(chat: Chat) {
 }
 
 export const inIframe = window.self !== window.top;
+
+const animals = [
+  "elephant",
+  "penguin",
+  "giraffe",
+  "octopus",
+  "kangaroo",
+  "dolphin",
+  "cheetah",
+  "koala",
+  "platypus",
+  "pangolin",
+];
+
+export function getRandomUsername() {
+  return `Anonymous ${animals[Math.floor(Math.random() * animals.length)]}`;
+}

examples/chat/tests/chat.spec.ts

@@ -1,48 +1,35 @@
 import { test } from "@playwright/test";
 import { ChatPage } from "./pages/ChatPage";
-import { LoginPage } from "./pages/LoginPage";
 
-test("chat between two users", async ({ page }) => {
+test("chat between two users", async ({ page: marioPage, browser }) => {
-  const loginPage = new LoginPage(page);
+  const context = await browser.newContext();
+  const luigiPage = await context.newPage();
 
-  const mario = "S. Mario";
+  await marioPage.goto("/");
-  const luigi = "Luigi";
 
-  await loginPage.goto();
+  const marioChat = new ChatPage(marioPage);
-  await loginPage.fillUsername(mario);
+  const luigiChat = new ChatPage(luigiPage);
-  await loginPage.signup();
 
-  const chatPage = new ChatPage(page);
+  await marioChat.setUsername("Mario");
 
   const message1ByMario = "Hello Luigi, are you ready to save the princess?";
 
-  await chatPage.sendMessage(message1ByMario);
+  await marioChat.sendMessage(message1ByMario);
-  await chatPage.expectMessageRow(message1ByMario);
+  await marioChat.expectMessageRow(message1ByMario);
 
-  const roomURL = page.url();
+  const roomURL = marioPage.url();
+  await luigiPage.goto(roomURL);
 
-  await chatPage.logout();
+  await luigiChat.setUsername("Luigi");
 
-  await loginPage.expectLoaded();
+  await luigiChat.expectMessageRow(message1ByMario);
-
-  await loginPage.fillUsername(luigi);
-  await loginPage.signup();
-
-  await page.goto(roomURL);
-
-  await chatPage.expectMessageRow(message1ByMario);
 
   const message2ByLuigi =
     "No, I'm not ready yet. I'm still trying to find the key to the castle.";
 
-  await chatPage.sendMessage(message2ByLuigi);
+  await luigiChat.sendMessage(message2ByLuigi);
-  await chatPage.expectMessageRow(message2ByLuigi);
+  await luigiChat.expectMessageRow(message2ByLuigi);
 
-  await chatPage.logout();
+  await marioChat.expectMessageRow(message1ByMario);
-  await loginPage.loginAs(mario);
+  await luigiChat.expectMessageRow(message2ByLuigi);
-
-  await page.goto(roomURL);
-
-  await chatPage.expectMessageRow(message1ByMario);
-  await chatPage.expectMessageRow(message2ByLuigi);
 });

examples/chat/tests/pages/ChatPage.ts

@@ -4,7 +4,7 @@ export class ChatPage {
   readonly page: Page;
   readonly messageInput: Locator;
   readonly logoutButton: Locator;
-
+  readonly usernameInput: Locator;
   constructor(page: Page) {
     this.page = page;
     this.messageInput = page.getByRole("textbox", {
@@ -13,6 +13,11 @@ export class ChatPage {
     this.logoutButton = page.getByRole("button", {
       name: "Log out",
     });
+    this.usernameInput = page.getByPlaceholder("Set username");
+  }
+
+  async setUsername(username: string) {
+    await this.usernameInput.fill(username);
   }
 
   async sendMessage(message: string) {

examples/chat/tests/pages/LoginPage.ts

@@ -1,40 +0,0 @@
-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/clerk/CHANGELOG.md

@@ -1,5 +1,144 @@
 # minimal-auth-clerk
 
+## 0.0.40
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-react@0.9.20
+  - jazz-react-auth-clerk@0.9.20
+
+## 0.0.39
+
+### Patch Changes
+
+- jazz-react@0.9.19
+- jazz-react-auth-clerk@0.9.19
+- jazz-tools@0.9.19
+
+## 0.0.38
+
+### Patch Changes
+
+- jazz-react@0.9.18
+- jazz-react-auth-clerk@0.9.18
+- jazz-tools@0.9.18
+
+## 0.0.37
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-react@0.9.17
+  - jazz-react-auth-clerk@0.9.17
+
+## 0.0.36
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-react-auth-clerk@0.9.16
+  - jazz-tools@0.9.16
+  - jazz-react@0.9.16
+
+## 0.0.35
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-react@0.9.15
+  - jazz-react-auth-clerk@0.9.15
+
+## 0.0.34
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-react@0.9.14
+  - jazz-react-auth-clerk@0.9.14
+
+## 0.0.33
+
+### Patch Changes
+
+- jazz-react@0.9.13
+- jazz-react-auth-clerk@0.9.13
+- jazz-tools@0.9.13
+
+## 0.0.32
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-react-auth-clerk@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.31
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-react-auth-clerk@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-react-auth-clerk@0.9.10
+
+## 0.0.29
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-react@0.9.9
+  - jazz-react-auth-clerk@0.9.9
+
+## 0.0.28
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react@0.9.8
+  - jazz-react-auth-clerk@0.9.8
+
+## 0.0.27
+
+### Patch Changes
+
+- jazz-react@0.9.4
+- jazz-react-auth-clerk@0.9.4
+
+## 0.0.26
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-react@0.9.1
+  - jazz-tools@0.9.1
+  - jazz-react-auth-clerk@0.9.1
+
+## 0.0.25
+
+### Patch Changes
+
+- Updated dependencies [956a4d1]
+- Updated dependencies [8eda792]
+  - jazz-react@0.9.0
+  - jazz-tools@0.9.0
+  - jazz-react-auth-clerk@0.9.0
+
 ## 0.0.24
 
 ### Patch Changes

examples/clerk/README.md

@@ -4,30 +4,56 @@ This is an example of how to use clerk authentication with Jazz.
 
 Live version: https://clerk-demo.jazz.tools
 
-## Installing & running the example locally
+## Getting started
 
-(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
 
-Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
 ```bash
-npx degit gardencmp/jazz jazz
+npx create-jazz-app@latest --example clerk --project-name clerk
 ```
 
-Go to the clerk example directory:
+Go to the new project directory.
 ```bash
-cd jazz/examples/clerk
+cd clerk
 ```
 
-Install and build dependencies:
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
 ```bash
 pnpm i && npx turbo build
 ```
 
-Start the dev server:
+Go to the example directory.
+```bash
+cd jazz/examples/clerk/
+```
+
+Start the dev server.
 ```bash
 pnpm dev
 ```
 
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
 ## Questions / problems / feedback
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.24",
+  "version": "0.0.40",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.8.51",
+    "jazz-react-auth-clerk": "workspace:0.9.20",
     "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/clerk/src/App.tsx

@@ -1,13 +1,25 @@
-import { useAccount } from "./main";
+import { SignInButton } from "@clerk/clerk-react";
+import { useAccount, useIsAuthenticated } from "jazz-react";
 
 function App() {
   const { me, logOut } = useAccount();
 
+  const isAuthenticated = useIsAuthenticated();
+
+  if (isAuthenticated) {
+    return (
+      <div className="container">
+        <h1>You're logged in</h1>
+        <p>Welcome back, {me?.profile?.name}</p>
+        <button onClick={() => logOut()}>Logout</button>
+      </div>
+    );
+  }
+
   return (
     <div className="container">
-      <h1>You're logged in</h1>
+      <h1>You're not logged in</h1>
-      <p>Welcome back, {me?.profile?.name}</p>
+      <SignInButton />
-      <button onClick={() => logOut()}>Logout</button>
     </div>
   );
 }

examples/clerk/src/index.css

@@ -62,7 +62,7 @@ button {
 }
 
 .container {
-  max-width: 200px;
+  max-width: 400px;
   margin: 0 auto;
   padding: 0 1rem;
   display: flex;

examples/clerk/src/main.tsx

@@ -1,10 +1,9 @@
-import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
+import { ClerkProvider, 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 { JazzProviderWithClerk } from "jazz-react-auth-clerk";
 
 // Import your publishable key
 const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
@@ -13,38 +12,28 @@ if (!PUBLISHABLE_KEY) {
   throw new Error("Add your Clerk publishable key to the .env.local file");
 }
 
-const Jazz = createJazzReactApp();
+function JazzProvider({ children }: { children: React.ReactNode }) {
-export const { useAccount, useCoState } = Jazz;
-
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
   const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk);
 
   return (
-    <main className="container">
+    <JazzProviderWithClerk
-      {state?.errors?.map((error) => (
+      clerk={clerk}
-        <div key={error}>{error}</div>
+      sync={{
-      ))}
+        peer: "wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co",
-      {clerk.user && auth ? (
+        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
-        <Jazz.Provider
+      }}
-          auth={auth}
+    >
-          peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
+      {children}
-        >
+    </JazzProviderWithClerk>
-          {children}
-        </Jazz.Provider>
-      ) : (
-        <SignInButton />
-      )}
-    </main>
   );
 }
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
-      <JazzAndAuth>
+      <JazzProvider>
         <App />
-      </JazzAndAuth>
+      </JazzProvider>
     </ClerkProvider>
   </StrictMode>,
 );

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,122 @@
 # file-share-svelte
 
+## 0.0.25
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-svelte@0.9.20
+
+## 0.0.24
+
+### Patch Changes
+
+- jazz-svelte@0.9.19
+- jazz-tools@0.9.19
+
+## 0.0.23
+
+### Patch Changes
+
+- jazz-svelte@0.9.18
+- jazz-tools@0.9.18
+
+## 0.0.22
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-svelte@0.9.17
+
+## 0.0.21
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-tools@0.9.16
+  - jazz-svelte@0.9.16
+
+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-svelte@0.9.15
+
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-svelte@0.9.14
+
+## 0.0.18
+
+### Patch Changes
+
+- jazz-svelte@0.9.13
+- jazz-tools@0.9.13
+
+## 0.0.17
+
+### Patch Changes
+
+- jazz-svelte@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.16
+
+### Patch Changes
+
+- jazz-svelte@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-tools@0.9.10
+  - jazz-svelte@0.9.10
+
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-svelte@0.9.9
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-svelte@0.9.8
+
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-tools@0.9.1
+  - jazz-svelte@0.9.1
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [9dd8d95]
+- Updated dependencies [8eda792]
+  - jazz-svelte@0.9.0
+  - jazz-tools@0.9.0
+
 ## 0.0.10
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.10",
+  "version": "0.0.25",
   "private": true,
   "type": "module",
   "scripts": {

examples/file-share-svelte/src/lib/components/FileItem.svelte

@@ -3,7 +3,7 @@
   import { SharedFile } from '$lib/schema';
   import { FileStream } from 'jazz-tools';
   import { File, FileDown, Trash2, Link2 } from 'lucide-svelte';
-  import { useAccount } from '$lib/jazz';
+  import { useAccount } from 'jazz-svelte';
   import { toast } from 'svelte-sonner';
   import { formatFileSize } from '$lib/utils';
 

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

@@ -1,7 +0,0 @@
-import { createJazzApp } from 'jazz-svelte';
-import { FileShareAccount } from './schema';
-
-export const { useAccount, useCoState, useAcceptInvite, useAccountOrGuest, Provider } =
-  createJazzApp({
-    AccountSchema: FileShareAccount
-  });

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

@@ -17,6 +17,6 @@ export function formatFileSize(bytes: number): string {
  * @param createdAt The creation date
  * @returns A unique file ID string
  */
-export function generateTempFileId(fileName: string, createdAt: Date): string {
+export function generateTempFileId(fileName: string | undefined, createdAt: Date | undefined): string {
-  return `file-${fileName}-${createdAt.getTime()}`;
+  return `file-${fileName ?? 'unknown'}-${createdAt?.getTime() ?? 0}`;
 }

examples/file-share-svelte/src/routes/+layout.svelte

@@ -1,13 +1,19 @@
+<script lang="ts" module>
+  declare module 'jazz-svelte' {
+    interface Register {
+      Account: FileShareAccount;
+    }
+  }
+</script>
+
 <script lang="ts">
-  import { Provider } from '$lib/jazz';
+  import { JazzProvider } from 'jazz-svelte';
   import { PasskeyAuthBasicUI, usePasskeyAuth } from 'jazz-svelte';
   import { Toaster } from 'svelte-sonner';
   import '../app.css';
+  import { FileShareAccount } from '$lib/schema';
 
   let { children } = $props();
-  const auth = usePasskeyAuth({
-    appName: 'File Share'
-  });
 </script>
 
 <svelte:head>
@@ -16,17 +22,16 @@
 
 <Toaster richColors />
 
-{#if auth.state.state === 'ready'}
+<JazzProvider
-  <div class="fixed inset-0 flex items-center justify-center bg-gray-50/80">
+  AccountSchema={FileShareAccount}
-    <div class="rounded-lg bg-white p-8 shadow-lg">
+  sync={{
-      <PasskeyAuthBasicUI state={auth.state} />
+    peer: "wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co",
-    </div>
+    when: "signedUp",
-  </div>
+  }}
-{/if}
+>
-{#if auth.current}
+  <PasskeyAuthBasicUI appName="File Share">
-  <Provider auth={auth.current} peer="wss://cloud.jazz.tools/?key=file-share-svelte@garden.co">
     <div class="min-h-screen bg-gray-100">
       {@render children()}
     </div>
-  </Provider>
+  </PasskeyAuthBasicUI>
-{/if}
+</JazzProvider>

examples/file-share-svelte/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useAccount, useCoState } from '$lib/jazz';
+  import { useAccount, useCoState } from 'jazz-svelte';
   import { SharedFile, ListOfSharedFiles } from '$lib/schema';
   import { createInviteLink } from 'jazz-svelte';
   import { FileStream } from 'jazz-tools';
@@ -28,7 +28,7 @@
     const input = event.target as HTMLInputElement;
     const files = input.files;
 
-    if (!files || !files.length || !me?.root?.sharedFiles || !me.root.publicGroup) return;
+    if (!files || !files.length || !me.root?.sharedFiles || !me.root.publicGroup) return;
 
     const file = files[0];
     const fileName = file.name;
@@ -129,12 +129,14 @@
       {#if sharedFiles.current}
         {#if !(sharedFiles.current.length === 0 && uploadingFiles.size === 0)}
           {#each [...sharedFiles.current, ...uploadingFiles.values()] as file (generateTempFileId(file?.name, file?.createdAt))}
-            <FileItem
+            {#if file}
-              {file}
+              <FileItem
-              loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
+                {file}
-              onShare={shareFile}
+                loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
-              onDelete={deleteFile}
+                onShare={shareFile}
-            />
+                onDelete={deleteFile}
+              />
+            {/if}
           {/each}
         {:else}
           <p class="text-center text-gray-500">No files yet</p>

examples/file-share-svelte/src/routes/file/[fileId]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { useAccount, useCoState } from '$lib/jazz';
+  import { useAccount, useCoState } from 'jazz-svelte';
   import { SharedFile } from '$lib/schema';
   import { File, FileDown, Link2 } from 'lucide-svelte';
   import type { ID } from 'jazz-tools';

examples/form/CHANGELOG.md

@@ -1,5 +1,143 @@
 # form
 
+## 0.0.36
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-browser-media-images@0.9.20
+  - jazz-react@0.9.20
+
+## 0.0.35
+
+### Patch Changes
+
+- jazz-react@0.9.19
+- jazz-tools@0.9.19
+- jazz-browser-media-images@0.9.19
+
+## 0.0.34
+
+### Patch Changes
+
+- jazz-react@0.9.18
+- jazz-tools@0.9.18
+- jazz-browser-media-images@0.9.18
+
+## 0.0.33
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-browser-media-images@0.9.17
+  - jazz-react@0.9.17
+
+## 0.0.32
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-tools@0.9.16
+  - jazz-browser-media-images@0.9.16
+  - jazz-react@0.9.16
+
+## 0.0.31
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-browser-media-images@0.9.15
+  - jazz-react@0.9.15
+
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-browser-media-images@0.9.14
+  - jazz-react@0.9.14
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-react@0.9.13
+- jazz-tools@0.9.13
+- jazz-browser-media-images@0.9.13
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.27
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.26
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
+## 0.0.25
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-browser-media-images@0.9.9
+  - jazz-react@0.9.9
+
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react@0.9.8
+  - jazz-browser-media-images@0.9.8
+
+## 0.0.23
+
+### Patch Changes
+
+- jazz-react@0.9.4
+
+## 0.0.22
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-react@0.9.1
+  - jazz-tools@0.9.1
+  - jazz-browser-media-images@0.9.1
+
+## 0.0.21
+
+### Patch Changes
+
+- Updated dependencies [956a4d1]
+- Updated dependencies [8eda792]
+  - jazz-react@0.9.0
+  - jazz-tools@0.9.0
+  - jazz-browser-media-images@0.9.0
+
 ## 0.0.20
 
 ### Patch Changes

examples/form/README.md

@@ -17,30 +17,56 @@ converting it into a `BubbleTeaOrder`.
 
 [See the full guide here.](https://jazz.tools/docs/react/design-patterns/form)
 
-## Installing & running the example locally
+## Getting started
 
-(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
 
-Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
 ```bash
-npx degit gardencmp/jazz jazz
+npx create-jazz-app@latest --example form --project-name form
 ```
 
-Go to the form example directory:
+Go to the new project directory.
 ```bash
-cd jazz/examples/form
+cd form
 ```
 
-Install and build dependencies:
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
 ```bash
 pnpm i && npx turbo build
 ```
 
-Start the dev server:
+Go to the example directory.
+```bash
+cd jazz/examples/form/
+```
+
+Start the dev server.
 ```bash
 pnpm dev
 ```
 
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
 ## Questions / problems / feedback
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
@@ -49,4 +75,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.20",
+  "version": "0.0.36",
   "type": "module",
   "scripts": {
     "dev": "vite",

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,
@@ -30,12 +30,9 @@ export function CreateOrder() {
     me.root.orders.push(draft as BubbleTeaOrder);
 
     // reset the draft
-    me.root.draft = DraftBubbleTeaOrder.create(
+    me.root.draft = DraftBubbleTeaOrder.create({
-      {
+      addOns: ListOfBubbleTeaAddOns.create([]),
-        addOns: ListOfBubbleTeaAddOns.create([], me),
+    });
-      },
-      me,
-    );
 
     router.navigate("/");
   };

examples/form/src/DraftIndicator.tsx

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

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,6 +1,6 @@
+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({

examples/form/src/main.tsx

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

examples/form/tests/form.spec.ts

@@ -1,13 +1,7 @@
 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 page.goto("/");
-
-  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");

examples/form/tests/pages/LoginPage.ts

@@ -1,40 +0,0 @@
-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/image-upload/CHANGELOG.md

@@ -1,5 +1,143 @@
 # image-upload
 
+## 0.0.38
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-browser-media-images@0.9.20
+  - jazz-react@0.9.20
+
+## 0.0.37
+
+### Patch Changes
+
+- jazz-react@0.9.19
+- jazz-tools@0.9.19
+- jazz-browser-media-images@0.9.19
+
+## 0.0.36
+
+### Patch Changes
+
+- jazz-react@0.9.18
+- jazz-tools@0.9.18
+- jazz-browser-media-images@0.9.18
+
+## 0.0.35
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-browser-media-images@0.9.17
+  - jazz-react@0.9.17
+
+## 0.0.34
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-tools@0.9.16
+  - jazz-browser-media-images@0.9.16
+  - jazz-react@0.9.16
+
+## 0.0.33
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-browser-media-images@0.9.15
+  - jazz-react@0.9.15
+
+## 0.0.32
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-browser-media-images@0.9.14
+  - jazz-react@0.9.14
+
+## 0.0.31
+
+### Patch Changes
+
+- jazz-react@0.9.13
+- jazz-tools@0.9.13
+- jazz-browser-media-images@0.9.13
+
+## 0.0.30
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.28
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
+## 0.0.27
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-browser-media-images@0.9.9
+  - jazz-react@0.9.9
+
+## 0.0.26
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react@0.9.8
+  - jazz-browser-media-images@0.9.8
+
+## 0.0.25
+
+### Patch Changes
+
+- jazz-react@0.9.4
+
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-react@0.9.1
+  - jazz-tools@0.9.1
+  - jazz-browser-media-images@0.9.1
+
+## 0.0.23
+
+### Patch Changes
+
+- Updated dependencies [956a4d1]
+- Updated dependencies [8eda792]
+  - jazz-react@0.9.0
+  - jazz-tools@0.9.0
+  - jazz-browser-media-images@0.9.0
+
 ## 0.0.22
 
 ### Patch Changes

examples/image-upload/README.md

@@ -4,30 +4,56 @@ 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
+## Getting started
 
-(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
 
-Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
 ```bash
-npx degit gardencmp/jazz jazz
+npx create-jazz-app@latest --example image-upload --project-name image-upload
 ```
 
-Go to the image-upload example directory:
+Go to the new project directory.
 ```bash
-cd jazz/examples/image-upload
+cd image-upload
 ```
 
-Install and build dependencies:
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
 ```bash
 pnpm i && npx turbo build
 ```
 
-Start the dev server:
+Go to the example directory.
+```bash
+cd jazz/examples/image-upload/
+```
+
+Start the dev server.
 ```bash
 pnpm dev
 ```
 
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
 ## Questions / problems / feedback
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.22",
+  "version": "0.0.38",
   "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,39 +1,25 @@
-import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+import { JazzProvider } 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({
+declare module "jazz-react" {
-  AccountSchema: JazzAccount,
+  interface Register {
-});
+    Account: 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@garden.co"
-      >
-        {children}
-      </Jazz.Provider>
-
-      {authState.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="Image upload" state={authState} />
-      )}
-    </>
-  );
 }
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <JazzAndAuth>
+    <JazzProvider
+      sync={{
+        peer: "wss://cloud.jazz.tools/?key=image-upload-example@garden.co",
+      }}
+      AccountSchema={JazzAccount}
+    >
       <App />
-    </JazzAndAuth>
+    </JazzProvider>
   </StrictMode>,
 );

examples/inspector/CHANGELOG.md

@@ -1,5 +1,71 @@
 # jazz-example-inspector
 
+## 0.0.100
+
+### Patch Changes
+
+- Updated dependencies [6ad0a9f]
+  - cojson@0.9.19
+  - cojson-transport-ws@0.9.19
+
+## 0.0.99
+
+### Patch Changes
+
+- Updated dependencies [8898b10]
+  - cojson@0.9.18
+  - cojson-transport-ws@0.9.18
+
+## 0.0.98
+
+### Patch Changes
+
+- Updated dependencies [8d29e50]
+  - cojson-transport-ws@0.9.13
+  - cojson@0.9.13
+
+## 0.0.97
+
+### Patch Changes
+
+- Updated dependencies [15d4b2a]
+  - cojson-transport-ws@0.9.12
+  - cojson@0.9.12
+
+## 0.0.96
+
+### Patch Changes
+
+- Updated dependencies [efbf3d8]
+- Updated dependencies [5863bad]
+  - cojson@0.9.11
+  - cojson-transport-ws@0.9.11
+
+## 0.0.95
+
+### Patch Changes
+
+- Updated dependencies [4aa377d]
+  - cojson@0.9.10
+  - cojson-transport-ws@0.9.10
+
+## 0.0.94
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - cojson@0.9.9
+  - cojson-transport-ws@0.9.9
+
+## 0.0.93
+
+### Patch Changes
+
+- Updated dependencies [8eda792]
+- Updated dependencies [1ef3226]
+  - cojson@0.9.0
+  - cojson-transport-ws@0.9.0
+
 ## 0.0.92
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "jazz-inspector",
+  "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.92",
+  "version": "0.0.100",
   "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.50",
+    "cojson": "workspace:0.9.19",
-    "cojson-transport-ws": "workspace:0.8.50",
+    "cojson-transport-ws": "workspace:0.9.19",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/music-player/CHANGELOG.md

@@ -1,5 +1,145 @@
 # jazz-example-musicplayer
 
+## 0.0.62
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-inspector@0.9.21
+  - jazz-react@0.9.20
+
+## 0.0.61
+
+### Patch Changes
+
+- jazz-inspector@0.9.20
+- jazz-react@0.9.19
+- jazz-tools@0.9.19
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies [2faf22f]
+  - jazz-inspector@0.9.19
+
+## 0.0.59
+
+### Patch Changes
+
+- jazz-inspector@0.9.18
+- jazz-react@0.9.18
+- jazz-tools@0.9.18
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-inspector@0.9.17
+  - jazz-react@0.9.17
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-tools@0.9.16
+  - jazz-inspector@0.9.16
+  - jazz-react@0.9.16
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-inspector@0.9.15
+  - jazz-react@0.9.15
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-inspector@0.9.14
+  - jazz-react@0.9.14
+
+## 0.0.54
+
+### Patch Changes
+
+- jazz-inspector@0.9.13
+- jazz-react@0.9.13
+- jazz-tools@0.9.13
+
+## 0.0.53
+
+### Patch Changes
+
+- jazz-inspector@0.9.12
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+
+## 0.0.52
+
+### Patch Changes
+
+- jazz-inspector@0.9.11
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-react@0.9.9
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react@0.9.8
+
+## 0.0.48
+
+### Patch Changes
+
+- jazz-react@0.9.4
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-react@0.9.1
+  - jazz-tools@0.9.1
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies [956a4d1]
+- Updated dependencies [8eda792]
+  - jazz-react@0.9.0
+  - jazz-tools@0.9.0
+
 ## 0.0.45
 
 ### Patch Changes

examples/music-player/README.md

@@ -2,30 +2,56 @@
 
 Live version: https://music-demo.jazz.tools
 
-## Installing & running the example locally
+## Getting started
 
-(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
 
-Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
 ```bash
-npx degit gardencmp/jazz jazz
+npx create-jazz-app@latest --example music-player --project-name music-player
 ```
 
-Go to the music-player example directory:
+Go to the new project directory.
 ```bash
-cd jazz/examples/music-player
+cd music-player
 ```
 
-Install and build dependencies:
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
 ```bash
 pnpm i && npx turbo build
 ```
 
-Start the dev server:
+Go to the example directory.
+```bash
+cd jazz/examples/music-player/
+```
+
+Start the dev server.
 ```bash
 pnpm dev
 ```
 
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
 ## Questions / problems / feedback
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
@@ -34,4 +60,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 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/2_main.tsx](./src/2_main.tsx).
+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 `<JazzProvider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.45",
+  "version": "0.0.62",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,13 +13,17 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.51",
+    "jazz-react": "workspace:0.9.20",
-    "jazz-tools": "workspace:0.8.51",
+    "jazz-tools": "workspace:0.9.20",
+    "jazz-inspector": "workspace:*",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/music-player/src/1_schema.ts

@@ -86,7 +86,7 @@ export class MusicaAccount extends Account {
    *  You can use it to set up the account root and any other initial CoValues you need.
    */
   migrate() {
-    if (!this._refs.root) {
+    if (this.root === undefined) {
       const ownership = { owner: this };
 
       const tracks = ListOfTracks.create([], ownership);

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

@@ -1,4 +1,5 @@
 import { Toaster } from "@/components/ui/toaster";
+import { JazzInspector } from "jazz-inspector";
 /* eslint-disable react-refresh/only-export-components */
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -10,26 +11,20 @@ import { PlayerControls } from "./components/PlayerControls";
 import "./index.css";
 
 import { MusicaAccount } from "@/1_schema";
-import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+import { JazzProvider } from "jazz-react";
 import { useUploadExampleData } from "./lib/useUploadExampleData";
 
 /**
- * Walkthrough: The top-level provider `<Jazz.Provider/>`
+ * Walkthrough: The top-level provider `<JazzProvider/>`
  *
- * This shows how to use the top-level provider `<Jazz.Provider/>`,
+ * This shows how to use the top-level provider `<JazzProvider/>`,
  * which provides the rest of the app with a controlled account (used through `useAccount` later).
  * Here we use `DemoAuth` which is great for prototyping you app without wasting time on figuring out
  * the best way to do auth.
  *
- * `<Jazz.Provider/>` also runs our account migration
+ * `<JazzProvider/>` also runs our account migration
  */
 
-const Jazz = createJazzReactApp({
-  AccountSchema: MusicaAccount,
-});
-
-export const { useAccount, useCoState, useAcceptInvite } = Jazz;
-
 function Main() {
   const mediaPlayer = useMediaPlayer();
 
@@ -59,33 +54,31 @@ function Main() {
   );
 }
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
+const peer =
-  const [auth, state] = useDemoAuth();
+  (new URL(window.location.href).searchParams.get(
+    "peer",
+  ) as `ws://${string}`) ??
+  "wss://cloud.jazz.tools/?key=music-player-example-jazz@garden.co";
 
-  const peer =
+declare module "jazz-react" {
-    (new URL(window.location.href).searchParams.get(
+  interface Register {
-      "peer",
+    Account: MusicaAccount;
-    ) as `ws://${string}`) ??
+  }
-    "wss://cloud.jazz.tools/?key=music-player-example-jazz@garden.co";
-
-  return (
-    <>
-      <Jazz.Provider
-        storage={["singleTabOPFS", "indexedDB"]}
-        auth={auth}
-        peer={peer}
-      >
-        {children}
-      </Jazz.Provider>
-      <DemoAuthBasicUI appName="Jazz Music Player" state={state} />
-    </>
-  );
 }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <JazzAndAuth>
+    <JazzProvider
+      sync={{
+        peer,
+        when: "signedUp", // This makes the app work in local mode when the user is anonymous
+      }}
+      storage="indexedDB"
+      AccountSchema={MusicaAccount}
+      defaultProfileName="Anonymous unicorn"
+    >
       <Main />
-    </JazzAndAuth>
+      <JazzInspector />
+    </JazzProvider>
   </React.StrictMode>,
 );

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

@@ -1,13 +1,17 @@
 import { useToast } from "@/hooks/use-toast";
-import { createInviteLink } from "jazz-react";
+import {
+  createInviteLink,
+  useAccount,
+  useCoState,
+  useIsAuthenticated,
+} from "jazz-react";
 import { ID } from "jazz-tools";
 import { useNavigate, useParams } from "react-router";
 import { Playlist } from "./1_schema";
-import { useAccount, useCoState } from "./2_main";
 import { createNewPlaylist, uploadMusicTracks } from "./4_actions";
 import { MediaPlayer } from "./5_useMediaPlayer";
+import { AuthButton } from "./components/AuthButton";
 import { FileUploadButton } from "./components/FileUploadButton";
-import { LogoutButton } from "./components/LogoutButton";
 import { MusicTrackRow } from "./components/MusicTrackRow";
 import { PlaylistTitleInput } from "./components/PlaylistTitleInput";
 import { SidePanel } from "./components/SidePanel";
@@ -32,19 +36,15 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   const { toast } = useToast();
 
   async function handleFileLoad(files: FileList) {
-    if (!me) return;
-
     /**
      * Follow this function definition to see how we update
      * values in Jazz and manage files!
      */
-    await uploadMusicTracks(me, files);
+    await uploadMusicTracks(files);
   }
 
   async function handleCreatePlaylist() {
-    if (!me) return;
+    const playlist = await createNewPlaylist();
-
-    const playlist = await createNewPlaylist(me);
 
     navigate(`/playlist/${playlist.id}`);
   }
@@ -71,6 +71,8 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
     });
   };
 
+  const isAuthenticated = useIsAuthenticated();
+
   return (
     <div className="flex flex-col h-screen text-gray-800 bg-blue-50">
       <div className="flex flex-1 overflow-hidden">
@@ -91,12 +93,12 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
                   <Button onClick={handleCreatePlaylist}>New playlist</Button>
                 </>
               )}
-              {!isRootPlaylist && (
+              {!isRootPlaylist && isAuthenticated && (
                 <Button onClick={handlePlaylistShareClick}>
                   Share playlist
                 </Button>
               )}
-              <LogoutButton />
+              <AuthButton />
             </div>
           </div>
           <ul className="flex flex-col">

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

@@ -22,14 +22,22 @@ import {
  * pattern that best fits your app.
  */
 
-export async function uploadMusicTracks(
+export async function uploadMusicTracks(files: Iterable<File>) {
-  account: MusicaAccount,
+  const me = await MusicaAccount.getMe().ensureLoaded({
-  files: Iterable<File>,
+    root: {
-) {
+      rootPlaylist: {
+        tracks: [],
+      },
+      playlists: [],
+    },
+  });
+
+  if (!me) return;
+
   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 group = Group.create(account);
+    const group = Group.create();
 
     const data = await getAudioFileData(file);
 
@@ -50,15 +58,23 @@ export async function uploadMusicTracks(
 
     // The newly created musicTrack can be associated to the
     // user track list using a simple push call
-    account.root?.rootPlaylist?.tracks?.push(musicTrack);
+    me.root.rootPlaylist.tracks.push(musicTrack);
   }
 }
 
-export async function createNewPlaylist(account: MusicaAccount) {
+export async function createNewPlaylist() {
+  const me = await MusicaAccount.getMe().ensureLoaded({
+    root: {
+      playlists: [],
+    },
+  });
+
+  if (!me) throw new Error("Current playlist not resolved");
+
   // Since playlists are meant to be shared we associate them
   // to a group which will contain the keys required to get
   // access to the "owned" values
-  const playlistGroup = Group.create(account);
+  const playlistGroup = Group.create();
 
   const playlist = Playlist.create(
     {
@@ -70,7 +86,7 @@ export async function createNewPlaylist(account: MusicaAccount) {
 
   // Again, we associate the new playlist to the
   // user by pushing it into the playlists CoList
-  account.root?.playlists?.push(playlist);
+  me.root.playlists.push(playlist);
 
   return playlist;
 }
@@ -78,10 +94,7 @@ export async function createNewPlaylist(account: MusicaAccount) {
 export async function addTrackToPlaylist(
   playlist: Playlist,
   track: MusicTrack,
-  account: MusicaAccount | undefined,
 ) {
-  if (!account) return;
-
   const alreadyAdded = playlist.tracks?.some(
     (t) => t?.id === track.id || t?._refs.sourceTrack?.id === track.id,
   );
@@ -108,12 +121,8 @@ export async function addTrackToPlaylist(
    *
    * Doing this for backwards compatibility for when the Group inheritance wasn't possible
    */
-  const blob = await FileStream.loadAsBlob(track._refs.file.id, account);
+  const blob = await FileStream.loadAsBlob(track._refs.file.id);
-  const waveform = await MusicTrackWaveform.load(
+  const waveform = await MusicTrackWaveform.load(track._refs.waveform.id, {});
-    track._refs.waveform.id,
-    account,
-    {},
-  );
 
   if (!blob || !waveform) return;
 
@@ -142,13 +151,25 @@ export async function updateMusicTrackTitle(track: MusicTrack, title: string) {
   track.title = title;
 }
 
-export async function updateActivePlaylist(
+export async function updateActivePlaylist(playlist?: Playlist) {
-  playlist: Playlist,
+  const me = await MusicaAccount.getMe().ensureLoaded({
-  me: MusicaAccount,
+    root: {
-) {
+      activePlaylist: {},
-  me.root!.activePlaylist = playlist ?? me.root!.rootPlaylist;
+      rootPlaylist: {},
+    },
+  });
+
+  if (!me) return;
+
+  me.root.activePlaylist = playlist ?? me.root.rootPlaylist;
 }
 
-export async function updateActiveTrack(track: MusicTrack, me: MusicaAccount) {
+export async function updateActiveTrack(track: MusicTrack) {
-  me.root!.activeTrack = track;
+  const me = await MusicaAccount.getMe().ensureLoaded({
+    root: {},
+  });
+
+  if (!me) return;
+
+  me.root.activeTrack = track;
 }

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

@@ -1,33 +1,33 @@
 import { MusicTrack, Playlist } from "@/1_schema";
 import { usePlayMedia } from "@/lib/audio/usePlayMedia";
 import { usePlayState } from "@/lib/audio/usePlayState";
+import { useAccount } from "jazz-react";
 import { FileStream, ID } from "jazz-tools";
 import { useRef, useState } from "react";
-import { useAccount } from "./2_main";
 import { updateActivePlaylist, updateActiveTrack } from "./4_actions";
 import { getNextTrack, getPrevTrack } from "./lib/getters";
 
 export function useMediaPlayer() {
-  const { me } = useAccount();
+  const { me } = useAccount({
+    root: {},
+  });
 
   const playState = usePlayState();
   const playMedia = usePlayMedia();
 
   const [loading, setLoading] = useState<ID<MusicTrack> | null>(null);
 
-  const activeTrackId = me?.root?._refs.activeTrack?.id;
+  const activeTrackId = me?.root._refs.activeTrack?.id;
 
   // Reference used to avoid out-of-order track loads
   const lastLoadedTrackId = useRef<ID<MusicTrack> | null>(null);
 
   async function loadTrack(track: MusicTrack) {
-    if (!me.root) return;
-
     lastLoadedTrackId.current = track.id;
 
     setLoading(track.id);
 
-    const file = await FileStream.loadAsBlob(track._refs.file.id, me);
+    const file = await FileStream.loadAsBlob(track._refs.file.id);
 
     if (!file) {
       setLoading(null);
@@ -40,7 +40,7 @@ export function useMediaPlayer() {
       return;
     }
 
-    updateActiveTrack(track, me);
+    updateActiveTrack(track);
 
     await playMedia(file);
 
@@ -48,20 +48,16 @@ export function useMediaPlayer() {
   }
 
   async function playNextTrack() {
-    if (!me?.root) return;
+    const track = await getNextTrack();
-
-    const track = await getNextTrack(me);
 
     if (track) {
-      updateActiveTrack(track, me);
+      updateActiveTrack(track);
       await loadTrack(track);
     }
   }
 
   async function playPrevTrack() {
-    if (!me?.root) return;
+    const track = await getPrevTrack();
-
-    const track = await getPrevTrack(me);
 
     if (track) {
       await loadTrack(track);
@@ -69,14 +65,12 @@ export function useMediaPlayer() {
   }
 
   async function setActiveTrack(track: MusicTrack, playlist?: Playlist) {
-    if (!me?.root) return;
-
     if (activeTrackId === track.id && lastLoadedTrackId.current !== null) {
       playState.toggle();
       return;
     }
 
-    updateActivePlaylist(playlist!, me);
+    updateActivePlaylist(playlist);
 
     await loadTrack(track);
 

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

@@ -1,25 +1,25 @@
+import { useAcceptInvite } from "jazz-react";
 import { ID } from "jazz-tools";
 import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
-import { Playlist } from "./1_schema";
+import { MusicaAccount, Playlist } from "./1_schema";
-import { useAcceptInvite, useAccount } from "./2_main";
 
 export function InvitePage() {
   const navigate = useNavigate();
 
-  const { me } = useAccount({
-    root: {
-      playlists: [],
-    },
-  });
-
   useAcceptInvite({
     invitedObjectSchema: Playlist,
     onAccept: useCallback(
       async (playlistId: ID<Playlist>) => {
-        if (!me) return;
+        const playlist = await Playlist.load(playlistId, {});
 
-        const playlist = await Playlist.load(playlistId, me, {});
+        const me = await MusicaAccount.getMe().ensureLoaded({
+          root: {
+            playlists: [],
+          },
+        });
+
+        if (!me) return;
 
         if (
           playlist &&
@@ -30,7 +30,7 @@ export function InvitePage() {
 
         navigate("/playlist/" + playlistId);
       },
-      [navigate, me],
+      [navigate],
     ),
   });
 

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useAccount, useIsAuthenticated } from "jazz-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { AuthModal } from "./AuthModal";
+
+export function AuthButton() {
+  const [open, setOpen] = useState(false);
+  const { logOut } = useAccount();
+  const navigate = useNavigate();
+
+  const isAuthenticated = useIsAuthenticated();
+
+  function handleSignOut() {
+    logOut();
+    navigate("/");
+  }
+
+  if (isAuthenticated) {
+    return (
+      <Button variant="outline" onClick={handleSignOut}>
+        Sign out
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <Button
+        onClick={() => setOpen(true)}
+        className="bg-white text-black hover:bg-gray-100"
+      >
+        Sign up
+      </Button>
+      <AuthModal open={open} onOpenChange={setOpen} />
+    </>
+  );
+}

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

@@ -0,0 +1,97 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { usePasskeyAuth } from "jazz-react";
+import { useState } from "react";
+
+interface AuthModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function AuthModal({ open, onOpenChange }: AuthModalProps) {
+  const [username, setUsername] = useState("");
+  const [isSignUp, setIsSignUp] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const auth = usePasskeyAuth({
+    appName: "Jazz Music Player",
+  });
+
+  const handleViewChange = () => {
+    setIsSignUp(!isSignUp);
+    setError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      if (isSignUp) {
+        await auth.signUp(username);
+      } else {
+        await auth.logIn();
+      }
+      onOpenChange(false);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Unknown error");
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-bold">
+            {isSignUp ? "Create account" : "Welcome back"}
+          </DialogTitle>
+          <DialogDescription>
+            {isSignUp
+              ? "Sign up to enable network sync and share your playlists with others"
+              : "Changes done before logging in will be lost"}
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {isSignUp && (
+            <div className="space-y-2">
+              <Label htmlFor="username">Username</Label>
+              <Input
+                id="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="Enter your username"
+                required
+              />
+            </div>
+          )}
+          {error && <div className="text-sm text-red-500">{error}</div>}
+          <div className="space-y-4">
+            <Button
+              type="submit"
+              className="w-full bg-blue-600 hover:bg-blue-700"
+            >
+              {isSignUp ? "Sign up with passkey" : "Login with passkey"}
+            </Button>
+            <div className="text-center text-sm">
+              {isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
+              <button
+                type="button"
+                onClick={handleViewChange}
+                className="text-blue-600 hover:underline"
+              >
+                {isSignUp ? "Login" : "Sign up"}
+              </button>
+            </div>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useIsAuthenticated } from "jazz-react";
+import { Info } from "lucide-react";
+
+export function LocalOnlyTag() {
+  const isAuthenticated = useIsAuthenticated();
+
+  if (isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="inline-flex items-center gap-1.5 cursor-help">
+            <Badge variant="default" className="h-5 text-xs font-normal">
+              Local only
+            </Badge>
+            <Info className="h-3.5 w-3.5 text-muted-foreground" />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-[250px]">
+          <p>
+            Sign up to enable network sync and share your playlists with others
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useAccount } from "@/2_main";
+import { useAccount } from "jazz-react";
 import { Button } from "./ui/button";
 
 export function LogoutButton() {

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

@@ -1,5 +1,4 @@
 import { MusicTrack, Playlist } from "@/1_schema";
-import { useAccount, useCoState } from "@/2_main";
 import { addTrackToPlaylist } from "@/4_actions";
 import {
   DropdownMenu,
@@ -8,6 +7,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import { useAccount, useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { MoreHorizontal } from "lucide-react";
 import { MusicTrackTitleInput } from "./MusicTrackTitleInput";
@@ -43,7 +43,7 @@ export function MusicTrackRow({
 
   function handleAddToPlaylist(playlist: Playlist) {
     if (!track) return;
-    addTrackToPlaylist(playlist, track, me);
+    addTrackToPlaylist(playlist, track);
   }
 
   return (

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

@@ -1,6 +1,6 @@
 import { MusicTrack } from "@/1_schema";
-import { useCoState } from "@/2_main";
 import { updateMusicTrackTitle } from "@/4_actions";
+import { useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { ChangeEvent, useState } from "react";
 

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

@@ -1,9 +1,9 @@
 import { MusicTrack } from "@/1_schema";
-import { useAccount, useCoState } from "@/2_main";
 import { MediaPlayer } from "@/5_useMediaPlayer";
 import { useMediaEndListener } from "@/lib/audio/useMediaEndListener";
 import { usePlayState } from "@/lib/audio/usePlayState";
 import { useKeyboardListener } from "@/lib/useKeyboardListener";
+import { useAccount, useCoState } from "jazz-react";
 import { Pause, Play, SkipBack, SkipForward } from "lucide-react";
 import { Waveform } from "./Waveform";
 

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

@@ -1,6 +1,6 @@
 import { Playlist } from "@/1_schema";
-import { useCoState } from "@/2_main";
 import { updatePlaylistTitle } from "@/4_actions";
+import { useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { ChangeEvent, useState } from "react";
 

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

@@ -1,5 +1,6 @@
-import { useAccount } from "@/2_main";
+import { useAccount } from "jazz-react";
 import { useNavigate, useParams } from "react-router";
+import { LocalOnlyTag } from "./LocalOnlyTag";
 
 export function SidePanel() {
   const { playlistId } = useParams();
@@ -25,7 +26,7 @@ export function SidePanel() {
 
   return (
     <aside className="w-64 p-6 bg-white overflow-y-auto">
-      <div className="flex items-center mb-6">
+      <div className="flex items-center mb-1">
         <svg
           className="w-8 h-8 mr-2"
           viewBox="0 0 24 24"
@@ -46,6 +47,9 @@ export function SidePanel() {
         </svg>
         <span className="text-xl font-bold text-blue-600">Music Player</span>
       </div>
+      <div className="mb-6">
+        <LocalOnlyTag />
+      </div>
       <nav>
         <h2 className="mb-2 text-sm font-semibold text-gray-600">Playlists</h2>
         <ul className="space-y-1">

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

@@ -1,7 +1,7 @@
 import { MusicTrack, MusicTrackWaveform } from "@/1_schema";
-import { useCoState } from "@/2_main";
 import { usePlayerCurrentTime } from "@/lib/audio/usePlayerCurrentTime";
 import { cn } from "@/lib/utils";
+import { useCoState } from "jazz-react";
 
 export function Waveform(props: { track: MusicTrack; height: number }) {
   const { track, height } = props;

examples/music-player/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

examples/music-player/src/components/ui/dialog.tsx

@@ -0,0 +1,120 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

examples/music-player/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

examples/music-player/src/components/ui/label.tsx

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

examples/music-player/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

examples/music-player/src/lib/getters.ts

@@ -1,10 +1,18 @@
 import { MusicaAccount } from "../1_schema";
 
-export async function getNextTrack(account: MusicaAccount) {
+export async function getNextTrack() {
-  if (!account.root?.activePlaylist?.tracks) return;
+  const me = await MusicaAccount.getMe().ensureLoaded({
+    root: {
+      activePlaylist: {
+        tracks: [],
+      },
+    },
+  });
 
-  const tracks = account.root.activePlaylist.tracks;
+  if (!me) return;
-  const activeTrack = account.root._refs.activeTrack;
+
+  const tracks = me.root.activePlaylist.tracks;
+  const activeTrack = me.root._refs.activeTrack;
 
   const currentIndex = tracks.findIndex((item) => item?.id === activeTrack.id);
 
@@ -13,11 +21,19 @@ export async function getNextTrack(account: MusicaAccount) {
   return tracks[nextIndex];
 }
 
-export async function getPrevTrack(account: MusicaAccount) {
+export async function getPrevTrack() {
-  if (!account.root?.activePlaylist?.tracks) return;
+  const me = await MusicaAccount.getMe().ensureLoaded({
+    root: {
+      activePlaylist: {
+        tracks: [],
+      },
+    },
+  });
 
-  const tracks = account.root.activePlaylist.tracks;
+  if (!me) return;
-  const activeTrack = account.root._refs.activeTrack;
+
+  const tracks = me.root.activePlaylist.tracks;
+  const activeTrack = me.root._refs.activeTrack;
 
   const currentIndex = tracks.findIndex((item) => item?.id === activeTrack.id);
 

examples/music-player/src/lib/useUploadExampleData.ts

@@ -1,30 +1,33 @@
-// eslint-disable-next-line react-compiler/react-compiler
+import { MusicaAccount } from "@/1_schema";
-/* eslint-disable react-hooks/exhaustive-deps */
+import { useAccount } from "jazz-react";
 import { useEffect } from "react";
-import { MusicaAccount } from "../1_schema";
-import { useAccount } from "../2_main";
 import { uploadMusicTracks } from "../4_actions";
 
 export function useUploadExampleData() {
-  const { me } = useAccount({
+  const { me } = useAccount();
+
+  useEffect(() => {
+    uploadOnboardingData();
+  }, [me.id]);
+}
+
+async function uploadOnboardingData() {
+  const me = await MusicaAccount.getMe().ensureLoaded({
     root: {},
   });
 
-  const shouldUploadOnboardingData = me?.root?.exampleDataLoaded === false;
+  if (!me) throw new Error("Me not resolved");
 
-  useEffect(() => {
+  if (me.root.exampleDataLoaded) return;
-    if (me?.root && shouldUploadOnboardingData) {
-      me.root.exampleDataLoaded = true;
 
-      uploadOnboardingData(me).then(() => {
+  me.root.exampleDataLoaded = true;
-        me.root.exampleDataLoaded = true;
+
-      });
+  try {
-    }
+    const trackFile = await (await fetch("/example.mp3")).blob();
-  }, [shouldUploadOnboardingData]);
+
-}
+    await uploadMusicTracks([new File([trackFile], "Example song")]);
-
+  } catch (error) {
-async function uploadOnboardingData(me: MusicaAccount) {
+    me.root.exampleDataLoaded = false;
-  const trackFile = await (await fetch("/example.mp3")).blob();
+    throw error;
-
+  }
-  return uploadMusicTracks(me, [new File([trackFile], "Example song")]);
 }

examples/music-player/tests/createAndShare.spec.ts

@@ -1,44 +1,84 @@
-import { test } from "@playwright/test";
+import { BrowserContext, test } from "@playwright/test";
 import { HomePage } from "./pages/HomePage";
-import { LoginPage } from "./pages/LoginPage";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-test("create a new playlist and share", async ({ page }) => {
+async function mockAuthenticator(context: BrowserContext) {
-  const loginPage = new LoginPage(page);
+  await context.addInitScript(() => {
+    Object.defineProperty(window.navigator, "credentials", {
+      value: {
+        ...window.navigator.credentials,
+        create: async () => ({
+          type: "public-key",
+          id: new Uint8Array([1, 2, 3, 4]),
+          rawId: new Uint8Array([1, 2, 3, 4]),
+          response: {
+            clientDataJSON: new Uint8Array([1]),
+            attestationObject: new Uint8Array([2]),
+          },
+        }),
+        get: async () => ({
+          type: "public-key",
+          id: new Uint8Array([1, 2, 3, 4]),
+          rawId: new Uint8Array([1, 2, 3, 4]),
+          response: {
+            authenticatorData: new Uint8Array([1]),
+            clientDataJSON: new Uint8Array([2]),
+            signature: new Uint8Array([3]),
+          },
+        }),
+      },
+      configurable: true,
+    });
+  });
+}
 
-  await loginPage.goto();
+// Configure the authenticator
-  await loginPage.fillUsername("S. Mario");
+test.beforeEach(async ({ context }) => {
-  await loginPage.signup();
+  // Enable virtual authenticator environment
+  await mockAuthenticator(context);
+});
 
-  const homePage = new HomePage(page);
+test("create a new playlist and share", async ({
+  page: marioPage,
+  browser,
+}) => {
+  await marioPage.goto("/");
+
+  const marioHome = new HomePage(marioPage);
 
   // The example song should be loaded
-  await homePage.expectMusicTrack("Example song");
+  await marioHome.expectMusicTrack("Example song");
-  await homePage.editTrackTitle("Example song", "Super Mario World");
+  await marioHome.editTrackTitle("Example song", "Super Mario World");
 
-  await homePage.createPlaylist();
+  await marioHome.createPlaylist();
-  await homePage.editPlaylistTitle("Save the princess");
+  await marioHome.editPlaylistTitle("Save the princess");
 
-  await homePage.navigateToPlaylist("All tracks");
+  await marioHome.navigateToPlaylist("All tracks");
-  await homePage.addTrackToPlaylist("Super Mario World", "Save the princess");
+  await marioHome.addTrackToPlaylist("Super Mario World", "Save the princess");
 
-  await homePage.navigateToPlaylist("Save the princess");
+  await marioHome.navigateToPlaylist("Save the princess");
-  await homePage.expectMusicTrack("Super Mario World");
+  await marioHome.expectMusicTrack("Super Mario World");
 
-  const url = await homePage.getShareLink();
+  await marioHome.signUp("Mario");
+
+  const url = await marioHome.getShareLink();
 
   await sleep(4000); // Wait for the sync to complete
 
-  await homePage.logout();
+  const luigiContext = await browser.newContext();
+  await mockAuthenticator(luigiContext);
 
-  await loginPage.goto();
+  const luigiPage = await luigiContext.newPage();
-  await loginPage.fillUsername("Luigi");
+  await luigiPage.goto("/");
-  await loginPage.signup();
 
-  await page.goto(url);
+  const luigiHome = new HomePage(luigiPage);
 
-  await homePage.expectMusicTrack("Super Mario World");
+  await luigiHome.signUp("Luigi");
-  await homePage.playMusicTrack("Super Mario World");
+
-  await homePage.expectActiveTrackPlaying();
+  await luigiPage.goto(url);
+
+  await luigiHome.expectMusicTrack("Super Mario World");
+  await luigiHome.playMusicTrack("Super Mario World");
+  await luigiHome.expectActiveTrackPlaying();
 });

examples/music-player/tests/pages/HomePage.ts

@@ -95,6 +95,17 @@ export class HomePage {
       .click();
   }
 
+  async signUp(name: string) {
+    await this.page.getByRole("button", { name: "Sign up" }).click();
+    await this.page.getByRole("textbox", { name: "Username" }).fill(name);
+    await this.page
+      .getByRole("button", { name: "Sign up with passkey" })
+      .click();
+    await expect(
+      this.page.getByRole("button", { name: "Sign out" }),
+    ).toBeVisible();
+  }
+
   async logout() {
     await this.logoutButton.click();
   }

examples/music-player/tests/pages/LoginPage.ts

@@ -1,40 +0,0 @@
-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/onboarding/CHANGELOG.md

@@ -1,5 +1,143 @@
 # jazz-example-onboarding
 
+## 0.0.42
+
+### Patch Changes
+
+- Updated dependencies [b01cc1f]
+  - jazz-tools@0.9.20
+  - jazz-browser-media-images@0.9.20
+  - jazz-react@0.9.20
+
+## 0.0.41
+
+### Patch Changes
+
+- jazz-react@0.9.19
+- jazz-tools@0.9.19
+- jazz-browser-media-images@0.9.19
+
+## 0.0.40
+
+### Patch Changes
+
+- jazz-react@0.9.18
+- jazz-tools@0.9.18
+- jazz-browser-media-images@0.9.18
+
+## 0.0.39
+
+### Patch Changes
+
+- Updated dependencies [c2ca1fe]
+- Updated dependencies [1227047]
+  - jazz-tools@0.9.17
+  - jazz-browser-media-images@0.9.17
+  - jazz-react@0.9.17
+
+## 0.0.38
+
+### Patch Changes
+
+- Updated dependencies [24b3b6a]
+  - jazz-tools@0.9.16
+  - jazz-browser-media-images@0.9.16
+  - jazz-react@0.9.16
+
+## 0.0.37
+
+### Patch Changes
+
+- Updated dependencies [7491711]
+  - jazz-tools@0.9.15
+  - jazz-browser-media-images@0.9.15
+  - jazz-react@0.9.15
+
+## 0.0.36
+
+### Patch Changes
+
+- Updated dependencies [3df93cc]
+  - jazz-tools@0.9.14
+  - jazz-browser-media-images@0.9.14
+  - jazz-react@0.9.14
+
+## 0.0.35
+
+### Patch Changes
+
+- jazz-react@0.9.13
+- jazz-tools@0.9.13
+- jazz-browser-media-images@0.9.13
+
+## 0.0.34
+
+### Patch Changes
+
+- jazz-react@0.9.12
+- jazz-tools@0.9.12
+- jazz-browser-media-images@0.9.12
+
+## 0.0.33
+
+### Patch Changes
+
+- jazz-react@0.9.11
+- jazz-tools@0.9.11
+- jazz-browser-media-images@0.9.11
+
+## 0.0.32
+
+### Patch Changes
+
+- Updated dependencies [5e83864]
+  - jazz-react@0.9.10
+  - jazz-tools@0.9.10
+  - jazz-browser-media-images@0.9.10
+
+## 0.0.31
+
+### Patch Changes
+
+- Updated dependencies [8eb9247]
+  - jazz-tools@0.9.9
+  - jazz-browser-media-images@0.9.9
+  - jazz-react@0.9.9
+
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [d1d773b]
+  - jazz-tools@0.9.8
+  - jazz-react@0.9.8
+  - jazz-browser-media-images@0.9.8
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-react@0.9.4
+
+## 0.0.28
+
+### Patch Changes
+
+- Updated dependencies [1b71969]
+  - jazz-react@0.9.1
+  - jazz-tools@0.9.1
+  - jazz-browser-media-images@0.9.1
+
+## 0.0.27
+
+### Patch Changes
+
+- Updated dependencies [956a4d1]
+- Updated dependencies [8eda792]
+  - jazz-react@0.9.0
+  - jazz-tools@0.9.0
+  - jazz-browser-media-images@0.9.0
+
 ## 0.0.26
 
 ### Patch Changes

examples/onboarding/README.md

@@ -1,29 +1,54 @@
 # Onboarding example with Jazz and React
 
-## Installing & running the example locally
+## Getting started
 
-(This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
 
-Start by downloading the [jazz repository](https://github.com/garden-co/jazz):
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
 ```bash
-npx degit gardencmp/jazz jazz
+npx create-jazz-app@latest --example onboarding --project-name onboarding
 ```
 
-Go to the onboarding example directory:
+Go to the new project directory.
 ```bash
-cd jazz/examples/onboarding
+cd onboarding
 ```
 
-Install and build dependencies:
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
 ```bash
 pnpm i && npx turbo build
 ```
 
-Start the dev server:
+Go to the example directory.
+```bash
+cd jazz/examples/onboarding/
+```
+
+Start the dev server.
 ```bash
 pnpm dev
 ```
 
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
 ## Questions / problems / feedback
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
@@ -32,4 +57,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 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).
+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 `<JazzProvider>` provider component in [./src/main.tsx](./src/main.tsx).