Merge remote-tracking branch 'origin/main' into add-file-share-example-app

fix(react-native): reconnect automatically when the WebSocket is closed by the server

.changeset/config.json

@@ -6,18 +6,23 @@
   "linked": [
     [
       "cojson",
-      "jazz-tools",
-      "jazz-browser",
-      "jazz-browser-media-images",
-      "jazz-browser-auth-clerk",
-      "jazz-react-auth-clerk",
-      "jazz-react",
-      "jazz-react-native",
-      "jazz-nodejs",
-      "jazz-run",
-      "cojson-transport-ws",
+      "cojson-storage",
       "cojson-storage-indexeddb",
-      "cojson-storage-sqlite"
+      "cojson-storage-sqlite",
+      "cojson-transport-ws",
+      "jazz-browser",
+      "jazz-browser-auth-clerk",
+      "jazz-browser-media-images",
+      "jazz-nodejs",
+      "jazz-react",
+      "jazz-react-auth-clerk",
+      "jazz-react-native",
+      "jazz-react-native-auth-clerk",
+      "jazz-react-native-media-images",
+      "jazz-run",
+      "jazz-svelte",
+      "jazz-tools",
+      "jazz-vue"
     ]
   ],
   "access": "public",

.changeset/flat-trains-give.md

@@ -0,0 +1,6 @@
+---
+"jazz-browser": patch
+"jazz-inspector": patch
+---
+
+Automatically set up the Cmd+J listener if 'allowJazzInspector' is present in the URL. Cmd+J opens inspector.jazz.tools with the current user's account.

.changeset/modern-dancers-worry.md

@@ -0,0 +1,5 @@
+---
+"jazz-react-native": patch
+---
+
+Reconnect automatically when the WebSocket is closed by the server

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat", "examples/music-player", "examples/pets", "examples/onboarding"]
+        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/music-player", "examples/pets", "examples/onboarding"]
 
     steps:
       - uses: actions/checkout@v3
@@ -41,20 +41,20 @@ jobs:
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
-      
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Setup .env
+        run: echo "VITE_WS_PEER=ws://localhost:4200/" >> .env
+        working-directory: ./${{ matrix.project }}
+
       - name: Pnpm Build
         run: pnpm turbo build
         working-directory: ./${{ matrix.project }}
-      
-      - name: Build jazz-run
-        run: pnpm exec turbo build && chmod +x dist/index.js;
-        working-directory: ./packages/jazz-run
 
       - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+        run: pnpm exec playwright install
         working-directory: ./${{ matrix.project }}
 
       - name: Run Playwright tests

CODE_OF_CONDUCT.md

@@ -59,7 +59,7 @@ representative at an online or offline event.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to [the community leaders responsible for enforcement](mailto:hello@gcmp.io).
+reported to [the community leaders responsible for enforcement](mailto:hello@garden.co).
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -6,7 +6,7 @@ Thank you for considering contributing to Jazz! Jazz is an open-source framework
 
 ### 1. Reporting Bugs
 
-If you find a bug, please [open an issue with as much detail as possible](https://github.com/gardencmp/jazz/issues). Include:
+If you find a bug, please [open an issue with as much detail as possible](https://github.com/garden-co/jazz/issues). Include:
 
 - A clear and descriptive title.
 - Steps to reproduce the issue.
@@ -40,7 +40,7 @@ You'll need Node.js 20.x or 22.x installed (we're working on support for 23.x),
 
 1. **Clone the repository**:
    ```bash
-   git clone https://github.com/gardencmp/jazz.git
+   git clone https://github.com/garden-co/jazz.git
    ```
 
 2. **Install dependencies**:

README.md

@@ -15,6 +15,6 @@ For community and support, please join our [Discord](https://discord.gg/utDMjHYg
 - Homepage: [jazz.tools](https://jazz.tools)
 - Docs: [jazz.tools/docs](https://jazz.tools/docs)
 - Community & support: [Discord](https://discord.gg/utDMjHYg42)
-- Updates: [X](https://x.com/jazz_tools) & [Email](https://gcmp.io/news)
+- Updates: [X](https://x.com/jazz_tools) & [Email](https://garden.co/news)
 
 Copyright 2024 — Garden Computing, Inc.

biome.json

@@ -27,5 +27,21 @@
     "rules": {
       "recommended": true
     }
-  }
+  },
+  "overrides": [
+    {
+      "include": ["packages/cojson-storage-indexeddb/**"],
+      "linter": {
+        "enabled": true,
+        "rules": {
+          "correctness": {
+            "useImportExtensions": "error"
+          },
+          "suspicious": {
+            "noExplicitAny": "info"
+          }
+        }
+      }
+    }
+  ]
 }

examples/book-shelf/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-book-shelf
 
+## 0.1.30
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+- jazz-browser-media-images@0.8.38
+
+## 0.1.29
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+- jazz-browser-media-images@0.8.37
+
+## 0.1.28
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+  - jazz-browser-media-images@0.8.36
+
 ## 0.1.27
 
 ### Patch Changes

examples/book-shelf/Dockerfile

@@ -1,4 +1,4 @@
 FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+LABEL org.opencontainers.image.source="https://github.com/garden-co/jazz"
 
 COPY ./dist /usr/share/caddy/

examples/book-shelf/package.json

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

examples/chat-rn-clerk/.env

@@ -1 +1 @@
-EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,35 @@
 # chat-rn-clerk
 
+## 1.0.30
+
+### Patch Changes
+
+- jazz-react-native@0.8.38
+- jazz-react-native-auth-clerk@0.8.38
+- jazz-tools@0.8.38
+- jazz-react-native-media-images@0.8.38
+
+## 1.0.29
+
+### Patch Changes
+
+- jazz-react-native@0.8.37
+- jazz-react-native-auth-clerk@0.8.37
+- jazz-tools@0.8.37
+- jazz-react-native-media-images@0.8.28
+
+## 1.0.28
+
+### Patch Changes
+
+- c84764a: feat: added jazz-react-native-auth-clerk package
+- Updated dependencies [c84764a]
+- Updated dependencies [441fe27]
+  - jazz-react-native-auth-clerk@0.8.36
+  - jazz-react-native@0.8.36
+  - jazz-tools@0.8.36
+  - jazz-react-native-media-images@0.8.27
+
 ## 1.0.27
 
 ### Patch Changes

examples/chat-rn-clerk/app.json

@@ -35,7 +35,9 @@
           }
         }
       ],
-      "expo-secure-store"
+      "expo-secure-store",
+      "expo-font",
+      "expo-router"
     ],
     "extra": {
       "eas": {

examples/chat-rn-clerk/cache.ts

@@ -4,7 +4,7 @@ import { Platform } from "react-native";
 export interface TokenCache {
   getToken: (key: string) => Promise<string | undefined | null>;
   saveToken: (key: string, token: string) => Promise<void>;
-  clearToken?: (key: string) => void;
+  clearToken: (key: string) => void;
 }
 
 const createTokenCache = (): TokenCache => {
@@ -27,6 +27,9 @@ const createTokenCache = (): TokenCache => {
     saveToken: (key: string, token: string) => {
       return SecureStore.setItemAsync(key, token);
     },
+    clearToken: (key: string) => {
+      return SecureStore.deleteItemAsync(key);
+    },
   };
 };
 

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

@@ -19,7 +19,10 @@ config.resolver.nodeModulesPaths = [
 ];
 config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
 config.resolver.unstable_enablePackageExports = true;
-config.resolver.requireCycleIgnorePatterns = [/(^|\/|\\)node_modules($|\/|\\)/];
+config.resolver.requireCycleIgnorePatterns = [
+  /(^|\/|\\)node_modules($|\/|\\)/,
+  /(^|\/|\\)packages($|\/|\\)/,
+];
 
 // Use turborepo to restore the cache when possible
 config.cacheStores = [

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.27",
+  "version": "1.0.30",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -17,59 +17,58 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
-    "@bam.tech/react-native-image-resizer": "^3.0.10",
+    "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.2.21",
     "@expo/vector-icons": "^14.0.2",
-    "@react-native-community/netinfo": "^11.3.1",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-navigation/native": "^7.0.13",
+    "@react-navigation/native-stack": "^7.1.14",
     "base-64": "^1.0.0",
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",
-    "expo": "~51.0.37",
-    "expo-build-properties": "~0.12.5",
-    "expo-clipboard": "~6.0.3",
-    "expo-constants": "~16.0.2",
-    "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.28",
-    "expo-file-system": "^17.0.1",
-    "expo-font": "~12.0.4",
-    "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.23",
-    "expo-secure-store": "~13.0.2",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
-    "expo-web-browser": "~13.0.3",
-    "jazz-react-auth-clerk": "workspace:*",
+    "expo": "^52.0.0",
+    "expo-build-properties": "~0.13.1",
+    "expo-clipboard": "~7.0.0",
+    "expo-constants": "~17.0.3",
+    "expo-crypto": "~14.0.1",
+    "expo-dev-client": "~5.0.5",
+    "expo-file-system": "^18.0.4",
+    "expo-font": "~13.0.1",
+    "expo-linking": "~7.0.3",
+    "expo-router": "~4.0.11",
+    "expo-secure-store": "~14.0.0",
+    "expo-splash-screen": "~0.29.16",
+    "expo-status-bar": "~2.0.0",
+    "expo-system-ui": "~4.0.5",
+    "expo-web-browser": "~14.0.1",
     "jazz-react-native": "workspace:*",
+    "jazz-react-native-auth-clerk": "workspace:*",
     "jazz-react-native-media-images": "workspace:*",
     "jazz-tools": "workspace:*",
     "nativewind": "^2.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "~0.74.5",
+    "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-mmkv": "3.0.1",
     "react-native-polyfill-globals": "^3.1.0",
     "react-native-quick-base64": "^2.1.2",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react-native-reanimated": "~3.16.3",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.1.0",
     "react-native-url-polyfill": "^2.0.0",
-    "react-native-web": "~0.19.10",
+    "react-native-web": "~0.19.13",
     "text-encoding": "^0.7.0",
     "web-streams-polyfill": "^3.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/jest": "^29.5.3",
-    "@types/react": "^18.2.19",
+    "@types/react": "^18.3.12",
     "@types/react-test-renderer": "^18.0.7",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.3",
+    "jest-expo": "~52.0.2",
     "react-test-renderer": "18.2.0",
     "tailwindcss": "3.3.2",
     "typescript": "^5.3.3"

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

@@ -1,14 +1,14 @@
 import { useClerk, useUser } from "@clerk/clerk-expo";
-import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+import { useJazzClerkAuth } from "jazz-react-native-auth-clerk";
 import React, {
-  useContext,
   createContext,
+  PropsWithChildren,
+  useContext,
   useEffect,
   useState,
-  PropsWithChildren,
 } from "react";
 import { Text, View } from "react-native";
-import { Jazz } from "./jazz";
+import { Jazz, kvStore } from "./jazz";
 
 const AuthContext = createContext<{
   isAuthenticated: boolean;
@@ -25,7 +25,7 @@ export function useAuth() {
 export function JazzAndAuth({ children }: PropsWithChildren) {
   const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
   const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk);
+  const [auth, state] = useJazzClerkAuth(clerk, kvStore);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   useEffect(() => {
@@ -46,10 +46,10 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
             <Text style={{ color: "red" }}>{error}</Text>
           </View>
         ))}
-      {auth ? (
+      {auth && clerk.user ? (
         <Jazz.Provider
           auth={auth}
-          peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@gcmp.io"
+          peer="wss://cloud.jazz.tools/?key=chat-rn-clerk-example-jazz@garden.co"
           storage={undefined}
         >
           {children}

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

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

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,28 @@
 # chat-rn
 
+## 1.0.28
+
+### Patch Changes
+
+- jazz-react-native@0.8.38
+- jazz-tools@0.8.38
+
+## 1.0.27
+
+### Patch Changes
+
+- jazz-react-native@0.8.37
+- jazz-tools@0.8.37
+
+## 1.0.26
+
+### Patch Changes
+
+- Updated dependencies [c84764a]
+- Updated dependencies [441fe27]
+  - jazz-react-native@0.8.36
+  - jazz-tools@0.8.36
+
 ## 1.0.25
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.25",
+  "version": "1.0.28",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -13,39 +13,38 @@
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
-    "@react-native-community/netinfo": "^11.3.1",
+    "@react-native-community/netinfo": "^11.4.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
     "base-64": "^1.0.0",
     "clsx": "^2.0.0",
-    "expo": "~51.0.37",
-    "expo-build-properties": "~0.12.5",
-    "expo-clipboard": "~6.0.3",
-    "expo-constants": "~16.0.2",
-    "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.28",
-    "expo-linking": "~6.3.1",
-    "expo-secure-store": "~13.0.2",
-    "expo-status-bar": "~1.12.1",
-    "expo-web-browser": "~13.0.3",
+    "expo": "^52.0.0",
+    "expo-build-properties": "~0.13.1",
+    "expo-clipboard": "~7.0.0",
+    "expo-constants": "~17.0.3",
+    "expo-crypto": "~14.0.1",
+    "expo-dev-client": "~5.0.5",
+    "expo-linking": "~7.0.3",
+    "expo-secure-store": "~14.0.0",
+    "expo-status-bar": "~2.0.0",
+    "expo-web-browser": "~14.0.1",
     "jazz-react-native": "workspace:*",
     "jazz-tools": "workspace:*",
     "nativewind": "^2.0.11",
-    "react": "^18.2.0",
-    "react-native": "~0.74.5",
+    "react": "18.2.0",
+    "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-mmkv": "3.0.1",
     "react-native-polyfill-globals": "^3.1.0",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.1.0",
     "react-native-url-polyfill": "^2.0.0",
     "text-encoding": "^0.7.0",
     "web-streams-polyfill": "^3.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "^18.2.19",
+    "@types/react": "^18.3.12",
     "tailwindcss": "3.3.2",
     "typescript": "^5.3.3"
   },

examples/chat-rn/src/App.tsx

@@ -51,7 +51,7 @@ function App() {
     <StrictMode>
       <Jazz.Provider
         auth={auth}
-        peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@gcmp.io"
+        peer="wss://cloud.jazz.tools/?key=chat-rn-example-jazz@garden.co"
         storage={undefined}
       >
         <NavigationContainer linking={linking} ref={navigationRef}>

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,30 @@
 # chat-vue
 
+## 0.0.21
+
+### Patch Changes
+
+- jazz-browser@0.8.38
+- jazz-tools@0.8.38
+- jazz-vue@0.8.38
+
+## 0.0.20
+
+### Patch Changes
+
+- jazz-browser@0.8.37
+- jazz-tools@0.8.37
+- jazz-vue@0.8.25
+
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-browser@0.8.36
+  - jazz-vue@0.8.24
+
 ## 0.0.18
 
 ### Patch Changes

examples/chat-vue/package.json

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

examples/chat-vue/src/main.ts

@@ -1,7 +1,7 @@
-import "./index.css";
 import { DemoAuthBasicUI, createJazzVueApp, useDemoAuth } from "jazz-vue";
 import { createApp, defineComponent, h } from "vue";
 import App from "./App.vue";
+import "./index.css";
 import router from "./router";
 
 const Jazz = createJazzVueApp();
@@ -18,7 +18,7 @@ const RootComponent = defineComponent({
         JazzProvider,
         {
           auth: authMethod.value,
-          peer: "wss://mesh.jazz.tools/?key=chat-example-jazz@gcmp.io",
+          peer: "wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co",
         },
         {
           default: () => h(App),

examples/chat/CHANGELOG.md

@@ -1,5 +1,33 @@
 # jazz-example-chat
 
+## 0.0.116
+
+### Patch Changes
+
+- Updated dependencies [b00ee91]
+- Updated dependencies [f488c09]
+  - cojson@0.8.38
+  - jazz-react@0.8.38
+  - jazz-tools@0.8.38
+
+## 0.0.115
+
+### Patch Changes
+
+- Updated dependencies [3d9f12e]
+  - cojson@0.8.37
+  - jazz-react@0.8.37
+  - jazz-tools@0.8.37
+
+## 0.0.114
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - cojson@0.8.36
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+
 ## 0.0.113
 
 ### Patch Changes

examples/chat/Dockerfile

@@ -1,4 +1,4 @@
 FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+LABEL org.opencontainers.image.source="https://github.com/garden-co/jazz"
 
 COPY ./dist /usr/share/caddy/

examples/chat/package.json

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

examples/chat/src/main.tsx

@@ -13,7 +13,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     <>
       <Jazz.Provider
         auth={auth}
-        peer="wss://cloud.jazz.tools/?key=chat-example-jazz@gcmp.io"
+        peer="wss://cloud.jazz.tools/?key=chat-example-jazz@garden.co"
       >
         {children}
       </Jazz.Provider>

examples/clerk/CHANGELOG.md

@@ -1,5 +1,30 @@
 # minimal-auth-clerk
 
+## 0.0.15
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-react-auth-clerk@0.8.38
+- jazz-tools@0.8.38
+
+## 0.0.14
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-react-auth-clerk@0.8.37
+- jazz-tools@0.8.37
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+  - jazz-react-auth-clerk@0.8.36
+
 ## 0.0.12
 
 ### Patch Changes

examples/clerk/README.md

@@ -1,4 +1,4 @@
-# Passkey authentication example with Jazz and React
+# Clerk authentication example with Jazz and React
 
 This is an example of how to use clerk authentication with Jazz.
 

examples/clerk/package.json

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

examples/clerk/src/main.tsx

@@ -28,7 +28,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
       {clerk.user && auth ? (
         <Jazz.Provider
           auth={auth}
-          peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@gcmp.io"
+          peer="wss://cloud.jazz.tools/?key=minimal-auth-clerk-example@garden.co"
         >
           {children}
         </Jazz.Provider>

examples/file-share-svelte/.gitignore

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

examples/file-share-svelte/.npmrc

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

examples/file-share-svelte/.prettierignore

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

examples/file-share-svelte/.prettierrc

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

examples/file-share-svelte/README.md

@@ -0,0 +1,56 @@
+# File share example with Jazz and Svelte
+
+This example app demonstrates how to implement secure file sharing in a Svelte application using Jazz.
+
+## Features
+
+This example showcases how to:
+
+- Upload files securely with end-to-end encryption
+- Generate and manage sharing links
+- Handle file downloads with decryption
+- Manage file access permissions
+- Authenticate users using passkeys
+
+## Getting Started
+
+1. Clone the repository:
+
+```sh
+git clone https://github.com/garden-co/jazz.git
+```
+
+2. Navigate to the example directory:
+
+```sh
+cd examples/file-share-svelte
+```
+
+3. Install dependencies:
+
+```sh
+pnpm install
+```
+
+4. Run the development server:
+
+```sh
+turbo dev
+```
+
+5. Open your browser and visit [http://localhost:5173](http://localhost:5173)
+
+---
+
+Alternatively, you can build and preview the app:
+
+```sh
+turbo build
+pnpm preview
+```
+
+## Learn More
+
+- [Jazz Documentation](https://jazz.tools/docs/svelte)
+- [Svelte Documentation](https://svelte.dev)
+- [WebAuthn API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API)

examples/file-share-svelte/eslint.config.js

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

examples/file-share-svelte/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "file-share-svelte",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "format-and-lint": "pnpm run format && pnpm run lint",
+    "format-and-lint:fix": "pnpm run format --write && pnpm run lint --fix",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-vercel": "^5.5.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/is-ci": "^3.0.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "globals": "^15.0.0",
+    "is-ci": "^3.0.1",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.0.3"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "jazz-svelte": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "lucide-svelte": "^0.463.0",
+    "svelte-sonner": "^0.3.28"
+  }
+}

examples/file-share-svelte/playwright.config.ts

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

examples/file-share-svelte/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

examples/file-share-svelte/src/app.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

examples/file-share-svelte/src/app.d.ts

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

examples/file-share-svelte/src/app.html

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

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

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+  import { SharedFile } from '$lib/schema';
+  import { FileStream } from 'jazz-tools';
+  import { File, FileDown, Trash2, Link2 } from 'lucide-svelte';
+  import { useAccount } from '$lib/jazz';
+  import { toast } from 'svelte-sonner';
+  import { formatFileSize } from '$lib/utils';
+
+  const {
+    file,
+    loading = false,
+    onDelete
+  }: {
+    file: SharedFile;
+    loading?: boolean;
+    onDelete: (file: SharedFile) => void;
+  } = $props();
+
+  const { me } = useAccount();
+  const isAdmin = $derived(me && file._owner?.myRole() === 'admin');
+
+  async function downloadFile() {
+    if (!file._refs.file?.id || !me) {
+      toast.error('Failed to download file');
+      return;
+    }
+
+    try {
+      const fileId = file._refs.file.id;
+
+      // Load the file as a blob, can take a while
+      const blob = await FileStream.loadAsBlob(fileId, me, {});
+      if (!blob) {
+        toast.error('Failed to download file');
+        return;
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = file.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      toast.success('File downloaded successfully');
+    } catch (error) {
+      console.error('Error downloading file:', error);
+      toast.error('Failed to download file');
+    }
+  }
+
+  async function shareFile() {
+    try {
+      const fileUrl = `${window.location.origin}/file/${file.id}`;
+      await navigator.clipboard.writeText(fileUrl);
+      toast.success('Share link copied to clipboard');
+    } catch (error) {
+      console.error('Error sharing file:', error);
+      toast.error('Failed to create share link');
+    }
+  }
+</script>
+
+<div
+  class="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4"
+  transition:slide={{ duration: 200 }}
+>
+  <div class="flex items-center space-x-4">
+    <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
+      <File class="h-6 w-6" />
+    </div>
+    <div>
+      <a href="/file/{file.id}" class="hover:text-blue-600 hover:underline">
+        <h3 class="font-medium text-gray-900">{file.name}</h3>
+      </a>
+      <p class="text-sm text-gray-500">
+        {isAdmin ? 'Owned by you' : ''} • Uploaded {new Date(
+          file.createdAt || 0
+        ).toLocaleDateString()} •
+        {formatFileSize(file.size || 0)}
+      </p>
+    </div>
+  </div>
+
+  <div class="flex items-center space-x-2">
+    {#if loading}
+      <div class="text-sm text-gray-500">Uploading...</div>
+    {:else}
+      <button
+        onclick={downloadFile}
+        class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700"
+        aria-label="Download file"
+      >
+        <FileDown class="h-5 w-5" />
+      </button>
+
+      {#if isAdmin}
+        <button
+          onclick={shareFile}
+          class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700"
+          aria-label="Share file"
+        >
+          <Link2 class="h-5 w-5" />
+        </button>
+
+        <button
+          onclick={() => onDelete(file)}
+          class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-600"
+          aria-label="Delete file"
+        >
+          <Trash2 class="h-5 w-5" />
+        </button>
+      {/if}
+    {/if}
+  </div>
+</div>

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

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

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

@@ -0,0 +1,7 @@
+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/schema.ts

@@ -0,0 +1,51 @@
+import { Account, CoList, CoMap, FileStream, Profile, co, Group } from 'jazz-tools';
+
+export class SharedFile extends CoMap {
+  name = co.string;
+  file = co.ref(FileStream);
+  createdAt = co.Date;
+  uploadedAt = co.Date;
+  size = co.number;
+}
+
+export class FileShareProfile extends Profile {
+  name = co.string;
+}
+
+export class ListOfSharedFiles extends CoList.Of(co.ref(SharedFile)) {}
+
+export class FileShareAccountRoot extends CoMap {
+  type = co.string;
+  sharedFiles = co.ref(ListOfSharedFiles);
+  publicGroup = co.ref(Group);
+}
+
+export class FileShareAccount extends Account {
+  profile = co.ref(FileShareProfile);
+  root = co.ref(FileShareAccountRoot);
+
+  /** The account migration is run on account creation and on every log-in.
+   *  You can use it to set up the account root and any other initial CoValues you need.
+   */
+  async migrate(creationProps?: { name: string }) {
+    super.migrate(creationProps);
+
+    await this._refs.root?.load();
+
+    // Initialize root if it doesn't exist
+    if (!this.root || this.root.type !== 'file-share-account') {
+      // Create a group that will own all shared files
+      const publicGroup = Group.create({ owner: this });
+      publicGroup.addMember('everyone', 'reader');
+
+      this.root = FileShareAccountRoot.create(
+        {
+          type: 'file-share-account',
+          sharedFiles: ListOfSharedFiles.create([], { owner: publicGroup }),
+          publicGroup
+        },
+        { owner: this }
+      );
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Formats a file size in bytes to a human readable string
+ * @param bytes The size in bytes
+ * @returns A formatted string like "1.5 MB"
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+/**
+ * Generates a temporary file ID based on the file name and creation time
+ * @param fileName The name of the file
+ * @param createdAt The creation date
+ * @returns A unique file ID string
+ */
+export function generateTempFileId(fileName: string, createdAt: Date): string {
+  return `file-${fileName}-${createdAt.getTime()}`;
+}

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Provider } from '$lib/jazz';
+  import { PasskeyAuthBasicUI, usePasskeyAuth } from 'jazz-svelte';
+  import { Toaster } from 'svelte-sonner';
+  import '../app.css';
+
+  let { children } = $props();
+  const auth = usePasskeyAuth({
+    appName: 'File Share'
+  });
+</script>
+
+<svelte:head>
+  <title>File Share</title>
+</svelte:head>
+
+<Toaster richColors />
+
+{#if auth.state.state === 'ready'}
+  <div class="fixed inset-0 flex items-center justify-center bg-gray-50/80">
+    <div class="rounded-lg bg-white p-8 shadow-lg">
+      <PasskeyAuthBasicUI state={auth.state} />
+    </div>
+  </div>
+{/if}
+{#if auth.current}
+  <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>
+{/if}

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

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import { useAccount, useCoState } from '$lib/jazz';
+  import { SharedFile, ListOfSharedFiles } from '$lib/schema';
+  import { createInviteLink } from 'jazz-svelte';
+  import { FileStream } from 'jazz-tools';
+  import FileItem from '$lib/components/FileItem.svelte';
+  import { SvelteMap } from 'svelte/reactivity';
+  import { generateTempFileId } from '$lib/utils';
+  import { CloudUpload } from 'lucide-svelte';
+
+  const { me, logOut } = useAccount();
+
+  const mySharedFilesId = me?.root?._refs.sharedFiles.id;
+  const sharedFiles = $derived(useCoState(ListOfSharedFiles, mySharedFilesId, [{}]));
+
+  let fileInput: HTMLInputElement;
+
+  type PendingSharedFile = {
+    name: string;
+    id: string;
+    createdAt: Date;
+  };
+
+  // Track files that are currently uploading
+  const uploadingFiles = new SvelteMap<string, PendingSharedFile>();
+
+  async function handleFileUpload(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const files = input.files;
+
+    if (!files || !files.length || !me?.root?.sharedFiles || !me.root.publicGroup) return;
+
+    const file = files[0];
+    const fileName = file.name;
+    const createdAt = new Date();
+    const fileId = generateTempFileId(fileName, createdAt);
+
+    const tempFile: PendingSharedFile = {
+      name: fileName,
+      id: fileId,
+      createdAt
+    };
+
+    // Add to uploading files
+    uploadingFiles.set(fileId, tempFile);
+
+    try {
+      const ownership = { owner: me.root.publicGroup };
+
+      // Create a FileStream from the uploaded file
+      const fileStream = await FileStream.createFromBlob(file, ownership);
+
+      // Create the shared file entry
+      const sharedFile = SharedFile.create(
+        {
+          name: fileName,
+          file: fileStream,
+          createdAt,
+          uploadedAt: new Date(),
+          size: file.size
+        },
+        ownership
+      );
+
+      // Add the file to the user's files list
+      me.root.sharedFiles.push(sharedFile);
+    } finally {
+      uploadingFiles.delete(fileId);
+      fileInput.value = ''; // reset input
+    }
+  }
+
+  async function shareFile(file: SharedFile) {
+    const inviteLink = createInviteLink(file, 'reader');
+    await navigator.clipboard.writeText(inviteLink);
+    alert('Share link copied to clipboard!');
+  }
+
+  async function deleteFile(file: SharedFile) {
+    if (!me?.root?.sharedFiles || !sharedFiles.current) return;
+
+    const index = sharedFiles.current.indexOf(file);
+    if (index > -1) {
+      me.root.sharedFiles.splice(index, 1);
+    }
+  }
+</script>
+
+<div class="min-h-screen bg-gray-50">
+  <div class="container mx-auto max-w-4xl px-4 py-8">
+    <div class="mb-12 flex items-center justify-between">
+      <div>
+        <h1 class="mb-2 text-4xl font-bold text-gray-900">File Share</h1>
+        <h2 class="text-xl text-gray-600">Welcome back, {me?.profile?.name}</h2>
+      </div>
+
+      <button
+        onclick={logOut}
+        class="rounded-lg bg-red-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+      >
+        Log Out
+      </button>
+    </div>
+
+    <!-- Upload Section -->
+    <div class="mb-8 rounded-xl bg-white p-6 shadow-sm">
+      <div
+        class="group relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-white p-12 text-center hover:border-blue-500 hover:bg-blue-50"
+        onclick={() => fileInput.click()}
+        onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
+        role="button"
+        tabindex="0"
+      >
+        <CloudUpload class="mb-2 h-8 w-8 text-gray-400 group-hover:text-blue-600" />
+        <h3 class="mb-1 text-lg font-medium text-gray-900">Upload a new file</h3>
+        <p class="text-sm text-gray-500">Click to select a file from your computer</p>
+        <input
+          type="file"
+          bind:this={fileInput}
+          onchange={handleFileUpload}
+          class="hidden"
+          accept="*/*"
+        />
+      </div>
+    </div>
+
+    <!-- Files List -->
+    <div class="space-y-4">
+      {#if sharedFiles.current}
+        {#if !(sharedFiles.current.length === 0 && uploadingFiles.size === 0)}
+          {#each [...sharedFiles.current, ...uploadingFiles.values()] as file (generateTempFileId(file?.name, file?.createdAt))}
+            <FileItem
+              {file}
+              loading={uploadingFiles.has(generateTempFileId(file?.name, file?.createdAt))}
+              onShare={shareFile}
+              onDelete={deleteFile}
+            />
+          {/each}
+        {:else}
+          <p class="text-center text-gray-500">No files yet</p>
+        {/if}
+      {/if}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { useAccount, useCoState } from '$lib/jazz';
+  import { SharedFile } from '$lib/schema';
+  import { File, FileDown, Link2 } from 'lucide-svelte';
+  import type { ID } from 'jazz-tools';
+  import { FileStream } from 'jazz-tools';
+  import { toast } from 'svelte-sonner';
+
+  const { me } = useAccount();
+  const fileId = $page.params.fileId;
+
+  const file = $state(useCoState(SharedFile, fileId as ID<SharedFile>, {}));
+  const isAdmin = $derived(me && file.current?._owner?.myRole() === 'admin');
+
+  async function downloadFile() {
+    if (!file.current?._refs.file?.id || !me) {
+      toast.error('Failed to download file');
+      return;
+    }
+
+    try {
+      const fileId = file.current._refs.file.id;
+      const blob = await FileStream.loadAsBlob(fileId, me, {});
+      if (!blob) {
+        toast.error('Failed to download file');
+        return;
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = file.current.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      toast.success('File downloaded successfully');
+    } catch (error) {
+      console.error('Error downloading file:', error);
+      toast.error('Failed to download file');
+    }
+  }
+
+  async function shareFile() {
+    try {
+      const fileUrl = `${window.location.origin}/file/${file.current?.id}`;
+      await navigator.clipboard.writeText(fileUrl);
+      toast.success('Share link copied to clipboard');
+    } catch (error) {
+      console.error('Error sharing file:', error);
+      toast.error('Failed to copy share link');
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>{file.current?.name} | File Share</title>
+</svelte:head>
+
+{#if file.current}
+  <div class="container mx-auto max-w-3xl p-4">
+    <div class="rounded-lg bg-white p-6 shadow-md">
+      <div class="mb-6 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <File class="h-6 w-6" />
+          <h1 class="text-2xl font-semibold">{file.current.name}</h1>
+        </div>
+        <div class="flex gap-2">
+          {#if isAdmin}
+            <button
+              onclick={shareFile}
+              class="flex items-center gap-2 rounded-md bg-gray-100 px-4 py-2 text-gray-700 hover:bg-gray-200"
+            >
+              <Link2 class="h-4 w-4" />
+              Share
+            </button>
+          {/if}
+          {#if file.current._refs.file}
+            <button
+              onclick={downloadFile}
+              class="flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+            >
+              <FileDown class="h-4 w-4" />
+              Download
+            </button>
+          {/if}
+        </div>
+      </div>
+
+      <p class="text-gray-600">
+        {isAdmin ? 'You own this file' : 'Shared with you'} • Uploaded {new Date(
+          file.current.createdAt || 0
+        ).toLocaleDateString()}
+      </p>
+    </div>
+  </div>
+{:else}
+  <div class="container mx-auto max-w-3xl p-4">
+    <div class="rounded-lg bg-white p-6 shadow-md">
+      <p class="text-gray-600">Loading file...</p>
+    </div>
+  </div>
+{/if}

examples/file-share-svelte/svelte.config.js

@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-vercel';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://svelte.dev/docs/kit/integrations
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    adapter: adapter()
+  }
+};
+
+export default config;

examples/file-share-svelte/tailwind.config.ts

@@ -0,0 +1,12 @@
+import typography from '@tailwindcss/typography';
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+
+  theme: {
+    extend: {}
+  },
+
+  plugins: [typography]
+} satisfies Config;

examples/file-share-svelte/tests/fixtures/test-file.txt

@@ -0,0 +1 @@
+This is a test file for e2e testing

examples/file-share-svelte/tests/upload.spec.ts

@@ -0,0 +1,82 @@
+import { expect, test } from '@playwright/test';
+import type { BrowserContext } from 'playwright-core';
+import path from 'path';
+
+async function mockAuthenticator(context: BrowserContext) {
+  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
+    });
+  });
+}
+
+// Configure the authenticator
+test.beforeEach(async ({ context }) => {
+  // Enable virtual authenticator environment
+  await mockAuthenticator(context);
+});
+
+test('can login with passkey and upload file', async ({ page, browser }) => {
+  // Navigate to the home page
+  await page.goto('/');
+  
+  // Click login and handle the passkey authentication
+  await page.getByRole('textbox').fill('Capitan Hook');
+  await page.getByRole('button', { name: "Sign up" }).click();
+  
+  // Verify successful login by checking for user-specific element
+  await expect(page.getByText("File Share")).toBeVisible();
+  
+  // Prepare file upload
+  const filePath = path.join(import.meta.dirname, 'fixtures/test-file.txt');
+  
+  // Click upload button and handle file selection
+  const fileChooserPromise = page.waitForEvent('filechooser');
+  await page.getByRole('button', { name: /upload|add file/i }).click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(filePath);
+  
+  // Verify the uploaded file appears in the list
+  await expect(page.getByText('test-file.txt')).toBeVisible();
+
+  await page.getByRole('button', { name: 'Share file' }).click();
+  const inviteLink = await page.evaluate(() => navigator.clipboard.readText());
+
+  // Create a new incognito instance and try to load the shared file
+  const newContext = await browser.newContext();
+  await mockAuthenticator(newContext);
+
+  const newUserPage = await newContext.newPage();
+  await newUserPage.goto(`/`);
+
+  await newUserPage.getByRole('textbox').fill('Mr. Smee');
+  await newUserPage.getByRole('button', { name: "Sign up" }).click();
+
+  await expect(newUserPage.getByText("File Share")).toBeVisible();
+
+  await newUserPage.goto(inviteLink);
+
+  await expect(newUserPage.getByText("test-file.txt")).toBeVisible();
+});

examples/file-share-svelte/tsconfig.json

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

examples/file-share-svelte/vite.config.ts

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

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,30 @@
 # image-upload
 
+## 0.0.13
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+- jazz-browser-media-images@0.8.38
+
+## 0.0.12
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+- jazz-browser-media-images@0.8.37
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+  - jazz-browser-media-images@0.8.36
+
 ## 0.0.10
 
 ### Patch Changes

examples/image-upload/package.json

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

examples/image-upload/src/App.tsx

@@ -5,17 +5,19 @@ function App() {
   const { me, logOut } = useAccount();
 
   return (
-    <div className="container">
-      <nav>
-        <span>
-          You're logged in as <strong>{me?.profile?.name}</strong>
-        </span>
-        <button onClick={() => logOut()}>Logout</button>
-      </nav>
-      <main>
+    <>
+      <header>
+        <nav className="container">
+          <span>
+            You're logged in as <strong>{me?.profile?.name}</strong>
+          </span>
+          <button onClick={() => logOut()}>Log out</button>
+        </nav>
+      </header>
+      <main className="container">
         <ImageUpload />
       </main>
-    </div>
+    </>
   );
 }
 

examples/image-upload/src/index.css

@@ -11,6 +11,7 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  --border-color: #2f2e2d;
 }
 
 html,
@@ -19,6 +20,10 @@ body,
   height: 100%;
 }
 
+body {
+  margin: 0;
+}
+
 button {
   border-radius: 8px;
   border: 0;
@@ -30,6 +35,7 @@ button {
 
 @media (prefers-color-scheme: light) {
   :root {
+    --border-color: #e5e5e5;
     color: #213547;
     background-color: #ffffff;
   }
@@ -43,23 +49,32 @@ button {
   }
 }
 
+* {
+  border-color: var(--border-color);
+}
+
+header,
+main {
+  padding: 0.5rem 0;
+}
+
+header {
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 2rem;
+}
+
 nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid whitesmoke;
-  margin-bottom: 2rem;
 }
 
 .container {
-  max-width: 500px;
-  margin: 0 auto;
-  padding: 0 1rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  max-width: 800px;
 }
 
 label {

examples/image-upload/src/main.tsx

@@ -18,11 +18,14 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     <>
       <Jazz.Provider
         auth={auth}
-        peer="wss://cloud.jazz.tools/?key=image-upload-example@gcmp.io"
+        peer="wss://cloud.jazz.tools/?key=image-upload-example@garden.co"
       >
         {children}
       </Jazz.Provider>
-      <DemoAuthBasicUI appName="Image upload" state={authState} />
+
+      {authState.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Image upload" state={authState} />
+      )}
     </>
   );
 }

examples/inspector/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-inspector
 
+## 0.0.85
+
+### Patch Changes
+
+- Updated dependencies [b00ee91]
+- Updated dependencies [f488c09]
+  - cojson@0.8.38
+  - cojson-transport-ws@0.8.38
+
+## 0.0.84
+
+### Patch Changes
+
+- Updated dependencies [3d9f12e]
+  - cojson@0.8.37
+  - cojson-transport-ws@0.8.37
+
+## 0.0.83
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - cojson@0.8.36
+  - cojson-transport-ws@0.8.36
+
 ## 0.0.82
 
 ### Patch Changes

examples/inspector/Dockerfile

@@ -1,4 +1,4 @@
 FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+LABEL org.opencontainers.image.source="https://github.com/garden-co/jazz"
 
 COPY ./dist /usr/share/caddy/

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.82",
+  "version": "0.0.85",
   "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.35",
-    "cojson-transport-ws": "workspace:0.8.35",
+    "cojson": "workspace:0.8.38",
+    "cojson-transport-ws": "workspace:0.8.38",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/inspector/src/viewer/new-app.tsx

@@ -53,12 +53,14 @@ export default function CoJsonViewerApp() {
   }, [currentAccount]);
 
   useEffect(() => {
-    if (!currentAccount) {
+    if (!currentAccount && path.length > 0) {
       setLocalNode(null);
       goToIndex(-1);
       return;
     }
 
+    if (!currentAccount) return;
+
     WasmCrypto.create().then(async (crypto) => {
       const wsPeer = createWebSocketPeer({
         id: "cloud",
@@ -77,7 +79,7 @@ export default function CoJsonViewerApp() {
       });
       setLocalNode(node);
     });
-  }, [currentAccount, goToIndex]);
+  }, [currentAccount, goToIndex, path]);
 
   const addAccount = (id: RawAccountID, secret: AgentSecret) => {
     const newAccount = { id, secret };
@@ -102,6 +104,18 @@ export default function CoJsonViewerApp() {
     }
   };
 
+  if (
+    path?.[0]?.coId.toString() === "import" &&
+    path?.[1]?.coId !== undefined &&
+    path?.[2]?.coId !== undefined
+  ) {
+    addAccount(
+      path?.[1]?.coId as RawAccountID,
+      atob(path?.[2]?.coId as string) as AgentSecret,
+    );
+    goToIndex(-1);
+  }
+
   return (
     <div className="w-full h-screen bg-gray-100 p-4 overflow-hidden flex flex-col">
       <div className="flex justify-between items-center mb-4">

examples/music-player/CHANGELOG.md

@@ -1,5 +1,27 @@
 # jazz-example-musicplayer
 
+## 0.0.36
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+
+## 0.0.35
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+
+## 0.0.34
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+
 ## 0.0.33
 
 ### Patch Changes

examples/music-player/Dockerfile

@@ -1,4 +1,4 @@
 FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+LABEL org.opencontainers.image.source="https://github.com/garden-co/jazz"
 
 COPY ./dist /usr/share/caddy/

examples/music-player/package.json

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

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

@@ -66,7 +66,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     (new URL(window.location.href).searchParams.get(
       "peer",
     ) as `ws://${string}`) ??
-    "wss://cloud.jazz.tools/?key=music-player-example-jazz@gcmp.io";
+    "wss://cloud.jazz.tools/?key=music-player-example-jazz@garden.co";
 
   return (
     <>

examples/onboarding/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-onboarding
 
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+- jazz-browser-media-images@0.8.38
+
+## 0.0.16
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+- jazz-browser-media-images@0.8.37
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+  - jazz-browser-media-images@0.8.36
+
 ## 0.0.14
 
 ### Patch Changes

examples/onboarding/Dockerfile

@@ -1,4 +1,4 @@
 FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+LABEL org.opencontainers.image.source="https://github.com/garden-co/jazz"
 
 COPY ./dist /usr/share/caddy/

examples/onboarding/package.json

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

examples/onboarding/src/main.tsx

@@ -1,9 +1,9 @@
 import App from "@/App.tsx";
-import React from "react";
-import ReactDOM from "react-dom/client";
 import "@/index.css";
 import { HRAccount } from "@/schema.ts";
 import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
+import React from "react";
+import ReactDOM from "react-dom/client";
 
 const Jazz = createJazzReactApp({
   AccountSchema: HRAccount,
@@ -14,7 +14,7 @@ const peer =
   (new URL(window.location.href).searchParams.get(
     "peer",
   ) as `ws://${string}`) ??
-  "wss://cloud.jazz.tools/?key=onboarding-example-jazz@gcmp.io";
+  "wss://cloud.jazz.tools/?key=onboarding-example-jazz@garden.co";
 
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
   const [auth, authState] = useDemoAuth();

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,23 @@
 # passkey-svelte
 
+## 0.0.5
+
+### Patch Changes
+
+- jazz-svelte@0.8.38
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-svelte@0.0.4
+
+## 0.0.3
+
+### Patch Changes
+
+- jazz-svelte@0.0.3
+
 ## 0.0.2
 
 ### Patch Changes

examples/passkey-svelte/README.md

@@ -1,38 +1,46 @@
-# sv
+# Passkey Authentication (Svelte)
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+This example app demonstrates how to implement passkey authentication in a Svelte application using Jazz.
 
-## Creating a project
+## Features
 
-If you're seeing this, you've probably already done this step. Congrats!
+This example showcases how to:
+- Set up passkey authentication in a Svelte application
+- Handle user registration with passkeys
+- Manage authentication state
+- Implement secure login/logout flows
 
-```bash
-# create a new project in the current directory
-npx sv create
+## Getting Started
 
-# create a new project in my-app
-npx sv create my-app
+1. Clone the repository:
+
+```sh
+git clone https://github.com/garden-co/jazz.git
 ```
 
-## Developing
+2. Navigate to the example directory:
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```sh
+cd examples/passkey-svelte
 ```
 
-## Building
+3. Install dependencies:
 
-To create a production version of your app:
-
-```bash
-npm run build
+```sh
+pnpm install
 ```
 
-You can preview the production build with `npm run preview`.
+4. Start the development server:
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+```sh
+pnpm dev
+```
+
+5. Open your browser and visit [http://localhost:5173](http://localhost:5173)
+
+
+## Learn More
+
+- [Jazz Documentation](https://jazz.tools/docs/svelte)
+- [WebAuthn API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API)
+- [Svelte Documentation](https://svelte.dev)

examples/passkey-svelte/package.json

@@ -1,7 +1,8 @@
 {
   "name": "passkey-svelte",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "type": "module",
+  "private": true,
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",

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

@@ -17,7 +17,7 @@
   {#if auth.current}
     <Provider
       auth={auth.current}
-      peer="wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@gcmp.io"
+      peer="wss://cloud.jazz.tools/?key=minimal-svelte-auth-passkey@garden.co"
     >
       {@render children?.()}
     </Provider>

examples/passkey/CHANGELOG.md

@@ -1,5 +1,27 @@
 # minimal-auth-passkey
 
+## 0.0.14
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+
+## 0.0.13
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+
 ## 0.0.11
 
 ### Patch Changes

examples/passkey/package.json

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

examples/passkey/src/main.tsx

@@ -21,7 +21,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     <>
       <Jazz.Provider
         auth={auth}
-        peer="wss://cloud.jazz.tools/?key=minimal-auth-passkey-example@gcmp.io"
+        peer="wss://cloud.jazz.tools/?key=minimal-auth-passkey-example@garden.co"
       >
         {children}
       </Jazz.Provider>

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,27 @@
 # jazz-password-manager
 
+## 0.0.35
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+
+## 0.0.34
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+
+## 0.0.33
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+
 ## 0.0.32
 
 ### Patch Changes

examples/password-manager/package.json

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

examples/password-manager/src/2_main.tsx

@@ -1,13 +1,13 @@
-import ReactDOM from "react-dom/client";
-import App from "./5_App.tsx";
-import "./index.css";
 import {
   PasskeyAuthBasicUI,
   createJazzReactApp,
   usePasskeyAuth,
 } from "jazz-react";
 import React from "react";
+import ReactDOM from "react-dom/client";
 import { PasswordManagerAccount } from "./1_schema.ts";
+import App from "./5_App.tsx";
+import "./index.css";
 
 const Jazz = createJazzReactApp<PasswordManagerAccount>({
   AccountSchema: PasswordManagerAccount,
@@ -24,7 +24,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     <>
       <Jazz.Provider
         auth={auth}
-        peer="wss://cloud.jazz.tools/?key=password-manager-example-jazz@gcmp.io"
+        peer="wss://cloud.jazz.tools/?key=password-manager-example-jazz@garden.co"
       >
         {children}
       </Jazz.Provider>

examples/pets/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-pets
 
+## 0.0.133
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+- jazz-browser-media-images@0.8.38
+
+## 0.0.132
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+- jazz-browser-media-images@0.8.37
+
+## 0.0.131
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+  - jazz-browser-media-images@0.8.36
+
 ## 0.0.130
 
 ### Patch Changes

examples/pets/Dockerfile

@@ -1,4 +1,4 @@
 FROM caddy:2.7.3-alpine
-LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+LABEL org.opencontainers.image.source="https://github.com/garden-co/jazz"
 
 COPY ./dist /usr/share/caddy/

examples/pets/package.json

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

examples/pets/playwright.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://localhost:5173/?peer=ws://localhost:1234",
+    baseURL: "http://localhost:5173/",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -49,10 +49,5 @@ export default defineConfig({
       url: "http://localhost:5173/",
       reuseExistingServer: !isCI,
     },
-    {
-      command: "pnpm sync --in-memory --port 1234",
-      url: "http://localhost:1234/health",
-      reuseExistingServer: !isCI,
-    },
   ],
 });

examples/pets/src/2_main.tsx

@@ -23,7 +23,7 @@ const peer =
   (new URL(window.location.href).searchParams.get(
     "peer",
   ) as `ws://${string}`) ??
-  "wss://cloud.jazz.tools/?key=pets-example-jazz@gcmp.io";
+  "wss://cloud.jazz.tools/?key=pets-example-jazz@garden.co";
 
 /** Walkthrough: The top-level provider `<Jazz.Provider/>`
  *

examples/reactions/CHANGELOG.md

@@ -1,5 +1,30 @@
 # reactions
 
+## 0.0.13
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-tools@0.8.38
+- jazz-browser-media-images@0.8.38
+
+## 0.0.12
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-tools@0.8.37
+- jazz-browser-media-images@0.8.37
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-react@0.8.36
+  - jazz-browser-media-images@0.8.36
+
 ## 0.0.10
 
 ### Patch Changes

examples/reactions/package.json

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

examples/reactions/src/App.tsx

@@ -17,21 +17,27 @@ function App() {
   };
 
   return (
-    <div className="container">
-      <nav>
-        <span>
-          You're logged in as <strong>{me?.profile?.name}</strong>
-        </span>
-        <button className="btn" onClick={() => logOut()}>
-          Logout
-        </button>
-      </nav>
+    <>
+      <header>
+        <nav className="container">
+          <span>
+            You're logged in as <strong>{me?.profile?.name}</strong>
+          </span>
+          <button className="btn" onClick={() => logOut()}>
+            Log out
+          </button>
+        </nav>
+      </header>
 
-      {router.route({
-        "/": () => createReactions() as never,
-        "/reactions/:id": (id) => <ReactionsScreen id={id as ID<Reactions>} />,
-      })}
-    </div>
+      <main className="container">
+        {router.route({
+          "/": () => createReactions() as never,
+          "/reactions/:id": (id) => (
+            <ReactionsScreen id={id as ID<Reactions>} />
+          ),
+        })}
+      </main>
+    </>
   );
 }
 

examples/reactions/src/index.css

@@ -5,13 +5,27 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #000;
+  background-color: #242424;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  --border-color: #404040;
+  --border-color: #2f2e2d;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+button {
+  cursor: pointer;
 }
 
 button.btn {
@@ -43,29 +57,28 @@ button.btn {
   border-color: var(--border-color);
 }
 
-html,
-body,
-#root {
-  height: 100%;
+header,
+main {
+  padding: 0.5rem 0;
+}
+
+header {
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 2rem;
 }
 
 nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--border-color);
-  margin-bottom: 2rem;
 }
 
 .container {
-  max-width: 500px;
-  margin: 0 auto;
-  padding: 0 1rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  max-width: 800px;
 }
 
 h1,

examples/reactions/src/main.tsx

@@ -15,11 +15,14 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     <>
       <Jazz.Provider
         auth={auth}
-        peer="wss://cloud.jazz.tools/?key=reactions-example@gcmp.io"
+        peer="wss://cloud.jazz.tools/?key=reactions-example@garden.co"
       >
         {children}
       </Jazz.Provider>
-      <DemoAuthBasicUI appName="Reactions" state={authState} />
+
+      {authState.state !== "signedIn" && (
+        <DemoAuthBasicUI appName="Reactions" state={authState} />
+      )}
     </>
   );
 }

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,30 @@
 # todo-vue
 
+## 0.0.19
+
+### Patch Changes
+
+- jazz-browser@0.8.38
+- jazz-tools@0.8.38
+- jazz-vue@0.8.38
+
+## 0.0.18
+
+### Patch Changes
+
+- jazz-browser@0.8.37
+- jazz-tools@0.8.37
+- jazz-vue@0.8.25
+
+## 0.0.17
+
+### Patch Changes
+
+- Updated dependencies [441fe27]
+  - jazz-tools@0.8.36
+  - jazz-browser@0.8.36
+  - jazz-vue@0.8.24
+
 ## 0.0.16
 
 ### Patch Changes

examples/todo-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "todo-vue",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "private": true,
   "type": "module",
   "scripts": {