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

Version Packages

.changeset/config.json

@@ -10,29 +10,12 @@
       "cojson-storage-indexeddb",
       "cojson-storage-sqlite",
       "cojson-transport-ws",
-      "jazz-browser",
-      "jazz-auth-clerk",
       "jazz-auth-betterauth",
       "jazz-betterauth-client-plugin",
       "jazz-betterauth-server-plugin",
       "jazz-react-auth-betterauth",
-      "jazz-browser-media-images",
-      "jazz-expo",
-      "jazz-inspector",
-      "jazz-inspector-element",
-      "jazz-nodejs",
-      "jazz-react",
-      "jazz-react-core",
-      "jazz-react-auth-clerk",
-      "jazz-react-native-core",
-      "jazz-react-native",
-      "jazz-react-native-media-images",
-      "jazz-richtext-prosemirror",
-      "jazz-richtext-tiptap",
       "jazz-run",
-      "jazz-svelte",
-      "jazz-tools",
-      "jazz-vue"
+      "jazz-tools"
     ]
   ],
   "access": "public",

.github/workflows/build-examples.yaml

@@ -1,37 +0,0 @@
-name: Build Examples
-
-on:
-  push:
-    branches: [ "main" ]
-
-jobs:
-  build-examples:
-    runs-on: blacksmith-4vcpu-ubuntu-2204
-    strategy:
-      matrix:
-        example: [
-          "chat",
-          "clerk",
-          "passkey",
-          "inspector",
-          "music-player",
-          "password-manager",
-          "pets",
-          "reactions",
-          "todo",
-        ]
-
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-      with:
-        submodules: true
-
-    - name: Setup Source Code
-      uses: ./.github/actions/source-code/
-
-    - name: Pnpm Build
-      run: |
-        pnpm install
-        pnpm turbo build;
-      working-directory: ./examples/${{ matrix.example }}

.github/workflows/build-starters.yaml

@@ -1,26 +0,0 @@
-name: Build Starters
-
-on:
-  push:
-    branches: ["main"]
-
-jobs:
-  build-starters:
-    runs-on: blacksmith-4vcpu-ubuntu-2204
-    strategy:
-      matrix:
-        starter: ["react-passkey-auth"]
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          submodules: true
-
-      - name: Setup Source Code
-        uses: ./.github/actions/source-code/
-
-      - name: Pnpm Build
-        run: |
-          pnpm install
-          pnpm turbo build;
-        working-directory: ./starters/${{ matrix.starter }}

.github/workflows/code-quality.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Setup Biome
         uses: biomejs/setup-biome@v2
         with:
-          version: latest
+          version: 1.9.4
       - name: Run Biome
         run: biome ci .
 

.github/workflows/e2e-rn-test.yml

@@ -60,7 +60,8 @@ jobs:
           emulator-options: -no-snapshot-save -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none -no-metrics
           disable-animations: true
           working-directory: ./examples/chat-rn-expo/
-          script: ./test/e2e/run.sh
+          # killall due to this issue: https://github.com/ReactiveCircus/android-emulator-runner/issues/385
+          script: ./test/e2e/run.sh && killall -INT crashpad_handler || true
 
       - name: Copy Maestro Output
         if: steps.e2e_test.outcome != 'success'

.github/workflows/playwright-homepage.yml

@@ -10,9 +10,6 @@ jobs:
   test:
     timeout-minutes: 60
     runs-on: blacksmith-4vcpu-ubuntu-2204
-    strategy:
-      matrix:
-        project: ["homepage/homepage"]
 
     steps:
       - uses: actions/checkout@v4
@@ -22,25 +19,28 @@ jobs:
       - name: Setup Source Code
         uses: ./.github/actions/source-code/
 
+      - name: Install root dependencies
+        run: pnpm install && pnpm exec turbo build --filter="./packages/*"
+
       - name: Install project dependencies
         run: pnpm install
-        working-directory: ./${{ matrix.project }}
+        working-directory: ./homepage/homepage
 
       - name: Pnpm Build
-        run: pnpm turbo build
-        working-directory: ./${{ matrix.project }}
+        run: pnpm exec turbo build
+        working-directory: ./homepage/homepage
 
       - name: Install Playwright Browsers
         run: pnpm exec playwright install
-        working-directory: ./${{ matrix.project }}
+        working-directory: ./homepage/homepage
 
       - name: Run Playwright tests
         run: pnpm exec playwright test
-        working-directory: ./${{ matrix.project }}
+        working-directory: ./homepage/homepage
 
       - uses: actions/upload-artifact@v4
         if: failure()
         with:
-          name: ${{ hashFiles(format('{0}/package.json', matrix.project)) }}-playwright-report
-          path: ./${{ matrix.project }}/playwright-report/
+          name: homepage-playwright-report
+          path: ./homepage/homepage/playwright-report/
           retention-days: 30

.github/workflows/playwright.yml

@@ -13,7 +13,21 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat",  "examples/clerk", "examples/betterauth", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/organization", "examples/pets", "starters/react-passkey-auth"]
+        project: [
+          "tests/e2e",
+          "examples/chat",
+          "examples/chat-svelte",
+          "examples/clerk",
+          "examples/betterauth",
+          "examples/file-share-svelte",
+          "examples/form",
+          "examples/inspector",
+          "examples/music-player",
+          "examples/organization",
+          "starters/react-passkey-auth",
+          "starters/svelte-passkey-auth",
+          "tests/jazz-svelte"
+        ]
 
     steps:
       - uses: actions/checkout@v4
@@ -24,7 +38,11 @@ jobs:
         uses: ./.github/actions/source-code/
 
       - name: Pnpm Build
-        run: pnpm turbo build
+        run: |
+          if [ -f .env.test ]; then
+            cp .env.test .env
+          fi
+          pnpm turbo build
         working-directory: ./${{ matrix.project }}
 
       - name: Install Playwright Browsers

biome.json

@@ -11,8 +11,9 @@
       "jazz-tools.json",
       "**/ios/**",
       "**/android/**",
-      "packages/jazz-svelte/**",
+      "tests/jazz-svelte/src/**",
       "examples/*svelte*/**",
+      "starters/*svelte*/**",
       "examples/jazz-paper-scissors/src/routeTree.gen.ts",
       "homepage/homepage/**",
       "**/package.json"

examples/betterauth/.gitignore

@@ -36,8 +36,10 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
-!.env
+.env
+.env.*
+!.env.example
+!.env.test
 
 # vercel
 .vercel

examples/betterauth/README.md

@@ -5,10 +5,12 @@ This example demonstrates how to integrate [Better Auth](https://www.better-auth
 ## Getting started
 
 To run this example, you may either:
-* Clone the Jazz monorepo and run this example from within.
-* Create a new Jazz project using this example as a template, and run that new project.
+
+- Clone the Jazz monorepo and run this example from within.
+- Create a new Jazz project using this example as a template, and run that new project.
 
 ### Setting environment variables
+
 - `NEXT_PUBLIC_AUTH_BASE_URL`: A URL to a Better Auth server. If undefined, the example will self-host a Better Auth server.
 - `BETTER_AUTH_SECRET`: The encryption secret used by the self-hosted Better Auth server (required only if `NEXT_PUBLIC_AUTH_BASE_URL` is undefined)
 - `GITHUB_CLIENT_ID`: The client ID for the GitHub OAuth provider used by the self-hosted Better Auth server (required only if `NEXT_PUBLIC_AUTH_BASE_URL` is undefined)
@@ -17,38 +19,64 @@ To run this example, you may either:
 ### Using this example as a template
 
 1. Create a new Jazz project, and use this example as a template.
+
 ```sh
 npx create-jazz-app@latest betterauth-app --example betterauth
 ```
-2. Navigate to the new project and start the development server.
+
+2. Navigate to the new project and install dependencies.
+
 ```sh
 cd betterauth-app
 pnpm install
+```
+
+3. Create a .env file (don't forget to set your [BETTER_AUTH_SECRET](https://www.better-auth.com/docs/installation#set-environment-variables)!)
+
+```sh
+mv .env.example .env
+```
+
+4. Start the development server
+
+```sh
 pnpm dev
 ```
 
+https://www.better-auth.com/docs/installation#set-environment-variables
+
 ### 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
 ```
 
 Go to the example directory.
+
 ```bash
 cd jazz/examples/betterauth/
 ```
 
+Create a .env file (don't forget to set your [BETTER_AUTH_SECRET](https://www.better-auth.com/docs/installation#set-environment-variables)!)
+
+```sh
+mv .env.example .env
+```
+
 Start the dev server.
+
 ```bash
 pnpm dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

examples/betterauth/package.json

@@ -21,11 +21,9 @@
 		"better-sqlite3": "^11.9.1",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"jazz-react-auth-betterauth": "workspace:*",
 		"jazz-betterauth-client-plugin": "workspace:*",
 		"jazz-betterauth-server-plugin": "workspace:*",
-		"jazz-inspector": "workspace:*",
-		"jazz-react": "workspace:*",
-		"jazz-react-auth-betterauth": "workspace:*",
 		"jazz-tools": "workspace:*",
 		"lucide-react": "^0.510.0",
 		"next": "15.3.2",

examples/betterauth/src/app/(app)/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { useAccount } from "jazz-react";
 import { Account } from "jazz-tools";
+import { useAccount } from "jazz-tools/react";
 import {
   AppWindowMacIcon,
   FileTextIcon,

examples/betterauth/src/components/JazzAndAuth.tsx

@@ -1,21 +1,21 @@
 "use client";
 
-import { JazzProvider } from "jazz-react";
 import { AuthProvider } from "jazz-react-auth-betterauth";
+import { JazzReactProvider } from "jazz-tools/react";
 import { type ReactNode, lazy } from "react";
 
 const JazzDevTools =
   process.env.NODE_ENV === "production"
     ? () => null
     : lazy(() =>
-        import("jazz-inspector").then((res) => ({
+        import("jazz-tools/inspector").then((res) => ({
           default: res.JazzInspector,
         })),
       );
 
 export function JazzAndAuth({ children }: { children: ReactNode }) {
   return (
-    <JazzProvider
+    <JazzReactProvider
       sync={{
         peer: "wss://cloud.jazz.tools/?key=betterauth-example@garden.co",
       }}
@@ -28,6 +28,6 @@ export function JazzAndAuth({ children }: { children: ReactNode }) {
         {children}
       </AuthProvider>
       <JazzDevTools />
-    </JazzProvider>
+    </JazzReactProvider>
   );
 }

examples/betterauth/src/components/navbar.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { useAccount, useIsAuthenticated } from "jazz-react";
 import { useAuth } from "jazz-react-auth-betterauth";
 import { Account } from "jazz-tools";
+import { useAccount, useIsAuthenticated } from "jazz-tools/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useCallback } from "react";

examples/betterauth/src/components/user-settings.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { useAccount, useIsAuthenticated } from "jazz-react";
 import { useAuth } from "jazz-react-auth-betterauth";
+import { useAccount, useIsAuthenticated } from "jazz-tools/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";

examples/chat-rn-expo-clerk/.env

@@ -1 +0,0 @@
-EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/chat-rn-expo-clerk/.env.example

@@ -0,0 +1 @@
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=

examples/chat-rn-expo-clerk/.gitignore

@@ -15,3 +15,9 @@ web-build/
 
 ios
 android
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test

examples/chat-rn-expo-clerk/README.md

@@ -8,9 +8,12 @@ First, install dependencies and build the project:
 
 ```bash
 pnpm i
+mv .env.example .env
 pnpm run build
 ```
 
+Don't forget to update `VITE_CLERK_PUBLISHABLE_KEY` in `.env` with your [Publishable Key](https://clerk.com/docs/deployments/clerk-environment-variables#clerk-publishable-and-secret-keys) from Clerk.
+
 ### 2. Inside the `examples/chat-rn-expo-clerk` Directory
 
 Next, navigate to the specific example project and run the following commands:

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

@@ -1,5 +1,5 @@
 import { Redirect, Stack } from "expo-router";
-import { useIsAuthenticated } from "jazz-expo";
+import { useIsAuthenticated } from "jazz-tools/expo";
 import React from "react";
 
 export default function HomeLayout() {

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

@@ -1,5 +1,5 @@
 import { Redirect, Stack } from "expo-router";
-import { useIsAuthenticated } from "jazz-expo";
+import { useIsAuthenticated } from "jazz-tools/expo";
 
 export default function UnAuthenticatedLayout() {
   const isAuthenticated = useIsAuthenticated();

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

@@ -4,7 +4,7 @@ import { secureStore } from "@clerk/clerk-expo/secure-store";
 import { useFonts } from "expo-font";
 import { Slot, useRouter, useSegments } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
-import { useIsAuthenticated, useJazzContext } from "jazz-expo";
+import { useIsAuthenticated, useJazzContext } from "jazz-tools/expo";
 import React, { useEffect } from "react";
 import { tokenCache } from "../cache";
 import { JazzAndAuth } from "../src/auth-context";

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

@@ -4,10 +4,10 @@ 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-expo";
-import { ProgressiveImg } from "jazz-expo";
-import { createImage } from "jazz-react-native-media-images";
 import { CoPlainText, Group, Loaded } from "jazz-tools";
+import { useAccount, useCoState } from "jazz-tools/expo";
+import { ProgressiveImgNative } from "jazz-tools/expo";
+import { createImageNative } from "jazz-tools/react-native-media-images";
 import { useEffect, useLayoutEffect, useState } from "react";
 import React, {
   SafeAreaView,
@@ -104,7 +104,7 @@ export default function Conversation() {
         setIsUploading(true);
         const base64Uri = `data:image/jpeg;base64,${result.assets[0].base64}`;
 
-        const image = await createImage(base64Uri, {
+        const image = await createImageNative(base64Uri, {
           owner: chat._owner,
           maxSize: 2048,
         });
@@ -149,15 +149,17 @@ export default function Conversation() {
           )}
         >
           {item.image && (
-            <ProgressiveImg image={item.image} maxWidth={1024}>
-              {({ src, res, originalSize }) => (
+            <ProgressiveImgNative
+              image={item.image}
+              maxWidth={1024}
+              children={({ src }) => (
                 <Image
                   source={{ uri: src }}
                   className="w-48 h-48 rounded-lg mb-2"
                   resizeMode="cover"
                 />
               )}
-            </ProgressiveImg>
+            />
           )}
           {item.text && (
             <Text

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

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

examples/chat-rn-expo-clerk/package.json

@@ -16,7 +16,6 @@
     "@bacons/text-decoder": "0.0.0",
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.2.21",
-    "@craftzdog/react-native-buffer": "6.0.5",
     "@expo/vector-icons": "^14.1.0",
     "@react-native-community/netinfo": "11.4.1",
     "@react-navigation/native": "7.0.19",
@@ -38,8 +37,6 @@
     "expo-sqlite": "15.2.9",
     "expo-status-bar": "~2.2.3",
     "expo-web-browser": "~14.1.6",
-    "jazz-expo": "workspace:*",
-    "jazz-react-native-media-images": "workspace:*",
     "jazz-tools": "workspace:*",
     "nativewind": "^4.1.21",
     "react": "19.0.0",
@@ -57,8 +54,6 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@types/react": "~19.0.14",
-    "@types/react-test-renderer": "^19.0.0",
-    "react-test-renderer": "18.3.1",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3"
   },

examples/chat-rn-expo-clerk/polyfills.js

@@ -3,9 +3,6 @@
 // @ts-expect-error - @types/react-native doesn't cover this file
 import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
 
-import { Buffer } from "@craftzdog/react-native-buffer";
-polyfillGlobal("Buffer", () => Buffer);
-
 // @ts-expect-error - @types/readable-stream doesn't have ReadableStream type
 import { ReadableStream } from "readable-stream";
 polyfillGlobal("ReadableStream", () => ReadableStream);

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

@@ -1,5 +1,5 @@
 import { useClerk } from "@clerk/clerk-expo";
-import { JazzProviderWithClerk } from "jazz-expo/auth/clerk";
+import { JazzExpoProviderWithClerk } from "jazz-tools/expo";
 import React, { PropsWithChildren } from "react";
 import { apiKey } from "./apiKey";
 
@@ -7,13 +7,13 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
   const clerk = useClerk();
 
   return (
-    <JazzProviderWithClerk
+    <JazzExpoProviderWithClerk
       clerk={clerk}
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
       }}
     >
       {children}
-    </JazzProviderWithClerk>
+    </JazzExpoProviderWithClerk>
   );
 }

examples/chat-rn-expo/.gitignore

@@ -36,4 +36,9 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 android/
-ios/
+ios/
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/chat-rn-expo/package.json

@@ -11,14 +11,13 @@
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@bacons/text-decoder": "^0.0.0",
-    "@craftzdog/react-native-buffer": "^6.0.5",
+    "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@react-native-community/netinfo": "11.4.1",
     "expo": "~53.0.9",
     "expo-clipboard": "^7.1.4",
     "expo-secure-store": "~14.2.3",
     "expo-sqlite": "~15.2.10",
     "expo-status-bar": "~2.2.3",
-    "jazz-expo": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "19.0.0",
     "react-native": "0.79.2",

examples/chat-rn-expo/polyfills.ts

@@ -3,9 +3,6 @@
 // @ts-expect-error - @types/react-native doesn't cover this file
 import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
 
-import { Buffer } from "@craftzdog/react-native-buffer";
-polyfillGlobal("Buffer", () => Buffer);
-
 // @ts-expect-error - @types/readable-stream doesn't have ReadableStream type
 import { ReadableStream } from "readable-stream";
 polyfillGlobal("ReadableStream", () => ReadableStream);

examples/chat-rn-expo/src/App.tsx

@@ -1,4 +1,4 @@
-import { JazzProvider } from "jazz-expo";
+import { JazzExpoProvider } from "jazz-tools/expo";
 import React, { StrictMode } from "react";
 import { apiKey } from "./apiKey";
 import ChatScreen from "./chat";
@@ -6,13 +6,13 @@ import ChatScreen from "./chat";
 export default function App() {
   return (
     <StrictMode>
-      <JazzProvider
+      <JazzExpoProvider
         sync={{
           peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
         }}
       >
         <ChatScreen />
-      </JazzProvider>
+      </JazzExpoProvider>
     </StrictMode>
   );
 }

examples/chat-rn-expo/src/chat.tsx

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

examples/chat-rn/.gitignore

@@ -73,3 +73,9 @@ yarn-error.log
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/chat-rn/package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@bacons/text-decoder": "0.0.0",
-    "@craftzdog/react-native-buffer": "6.0.5",
     "@op-engineering/op-sqlite": "^11.4.8",
     "@react-native-clipboard/clipboard": "1.16.1",
     "@react-native-community/netinfo": "11.4.1",
@@ -21,7 +20,6 @@
     "clsx": "^2.0.0",
     "cojson": "workspace:*",
     "cojson-transport-ws": "workspace:*",
-    "jazz-react-native": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "19.0.0",
     "react-native": "0.79.2",
@@ -47,11 +45,9 @@
     "@rnx-kit/metro-config": "^2.0.1",
     "@rnx-kit/metro-resolver-symlinks": "^0.2.1",
     "@types/react": "^18.3.12",
-    "@types/react-test-renderer": "^18.0.0",
     "eslint": "^8.19.0",
     "pod-install": "^0.3.5",
     "prettier": "2.8.8",
-    "react-test-renderer": "18.3.1",
     "typescript": "5.6.2"
   },
   "engines": {

examples/chat-rn/src/App.tsx

@@ -3,7 +3,7 @@ import {
   useNavigationContainerRef,
 } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { JazzProvider } from "jazz-react-native";
+import { JazzReactNativeProvider } from "jazz-tools/react-native";
 import React, { StrictMode, useEffect, useState } from "react";
 import { Linking } from "react-native";
 import { apiKey } from "./apiKey";
@@ -49,7 +49,7 @@ function App() {
 
   return (
     <StrictMode>
-      <JazzProvider
+      <JazzReactNativeProvider
         sync={{
           peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
         }}
@@ -67,7 +67,7 @@ function App() {
             />
           </Stack.Navigator>
         </NavigationContainer>
-      </JazzProvider>
+      </JazzReactNativeProvider>
     </StrictMode>
   );
 }

examples/chat-rn/src/chat.tsx

@@ -1,6 +1,6 @@
 import Clipboard from "@react-native-clipboard/clipboard";
-import { useAccount, useCoState } from "jazz-react-native";
 import { CoPlainText, Group, ID, Loaded, Profile } from "jazz-tools";
+import { useAccount, useCoState } from "jazz-tools/react-native";
 import { useEffect, useState } from "react";
 import {
   Button,

examples/chat-rn/src/invite.tsx

@@ -1,4 +1,4 @@
-import { useAcceptInvite } from "jazz-react-native";
+import { useAcceptInviteNative } from "jazz-tools/react-native";
 import React from "react";
 import { Text } from "react-native";
 import { Chat } from "./schema";
@@ -8,7 +8,7 @@ export function HandleInviteScreen({
 }: {
   navigation: any;
 }) {
-  useAcceptInvite({
+  useAcceptInviteNative({
     invitedObjectSchema: Chat,
     onAccept: async (chatId) => {
       navigation.navigate("ChatScreen", { chatId });

examples/chat-rn/src/polyfills.ts

@@ -4,9 +4,6 @@
 import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
 // import 'react-native-polyfill-globals/auto';
 
-import { Buffer } from "@craftzdog/react-native-buffer";
-polyfillGlobal("Buffer", () => Buffer);
-
 // @ts-expect-error - @types/readable-stream doesn't have ReadableStream type
 import { ReadableStream } from "readable-stream";
 polyfillGlobal("ReadableStream", () => ReadableStream);

examples/chat-svelte/CHANGELOG.md

@@ -1,186 +1,48 @@
 # passkey-svelte
 
-## 0.0.106
-
-### Patch Changes
-
-- Updated dependencies [048ac1d]
-  - jazz-tools@0.14.22
-  - jazz-svelte@0.14.22
-
-## 0.0.105
-
-### Patch Changes
-
-- Updated dependencies [e7e505e]
-- Updated dependencies [d14a069]
-- Updated dependencies [13b57aa]
-- Updated dependencies [5662faa]
-- Updated dependencies [2116a59]
-  - jazz-tools@0.14.21
-  - jazz-svelte@0.14.21
-
-## 0.0.104
-
-### Patch Changes
-
-- Updated dependencies [6f72419]
-- Updated dependencies [04b20c2]
-  - jazz-tools@0.14.20
-  - jazz-svelte@0.14.20
-
-## 0.0.103
-
-### Patch Changes
-
-- jazz-svelte@0.14.19
-- jazz-tools@0.14.19
-
-## 0.0.102
-
-### Patch Changes
-
-- Updated dependencies [4b950bc]
-- Updated dependencies [d6d9c0a]
-- Updated dependencies [c559054]
-  - jazz-tools@0.14.18
-  - jazz-svelte@0.14.18
-
-## 0.0.101
-
-### Patch Changes
-
-- Updated dependencies [e512df4]
-  - jazz-tools@0.14.17
-  - jazz-svelte@0.14.17
-
-## 0.0.100
-
-### Patch Changes
-
-- jazz-svelte@0.14.16
-- jazz-tools@0.14.16
-
-## 0.0.99
-
-### Patch Changes
-
-- jazz-svelte@0.14.15
-- jazz-tools@0.14.15
-
-## 0.0.98
-
-### Patch Changes
-
-- Updated dependencies [e32a1f7]
-  - jazz-tools@0.14.14
-  - jazz-svelte@0.14.14
-
-## 0.0.97
-
-### Patch Changes
-
-- Updated dependencies [dc746a2]
-- Updated dependencies [f869d9a]
-- Updated dependencies [3fe6832]
-  - jazz-tools@0.14.10
-  - jazz-svelte@0.14.10
-
-## 0.0.96
-
-### Patch Changes
-
-- Updated dependencies [22c2600]
-  - jazz-tools@0.14.9
-  - jazz-svelte@0.14.9
-
-## 0.0.95
-
-### Patch Changes
-
-- Updated dependencies [637ae13]
-  - jazz-tools@0.14.8
-  - jazz-svelte@0.14.8
-
-## 0.0.94
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-svelte@0.14.7
-
-## 0.0.93
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-svelte@0.14.6
-
-## 0.0.92
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-svelte@0.14.5
-
-## 0.0.91
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-svelte@0.14.4
-
-## 0.0.90
-
-### Patch Changes
-
-- Updated dependencies [b2ee306]
-  - jazz-svelte@0.14.3
-
 ## 0.0.89
 
 ### Patch Changes
 
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-svelte@0.14.2
+- Updated dependencies [1378a1f]
+- Updated dependencies [0fa051a]
+  - jazz-tools@0.15.0
 
 ## 0.0.88
 
 ### Patch Changes
 
-- Updated dependencies [cdfc105]
-  - jazz-tools@0.14.1
-  - jazz-svelte@0.14.1
+- Updated dependencies [06c5a1c]
+  - jazz-tools@0.14.28
+  - jazz-browser-media-images@0.14.28
+  - jazz-svelte@0.14.28
 
 ## 0.0.87
 
 ### Patch Changes
 
-- Updated dependencies [5835ed1]
-  - jazz-tools@0.14.0
-  - jazz-svelte@0.14.0
+- Updated dependencies [a026073]
+  - jazz-tools@0.14.27
+  - jazz-browser-media-images@0.14.27
+  - jazz-svelte@0.14.27
 
 ## 0.0.86
 
 ### Patch Changes
 
-- jazz-svelte@0.13.32
+- Updated dependencies [e35a380]
+  - jazz-svelte@0.14.26
+  - jazz-tools@0.14.26
+  - jazz-browser-media-images@0.14.26
 
 ## 0.0.85
 
 ### Patch Changes
 
-- Updated dependencies [e5b170f]
-  - jazz-tools@0.13.31
-  - jazz-svelte@0.13.31
+- Updated dependencies [99a2d9b]
+  - jazz-tools@0.14.25
+  - jazz-browser-media-images@0.14.25
+  - jazz-svelte@0.14.25
 
 ## 0.0.84
 

examples/chat-svelte/README.md

@@ -1,25 +1,28 @@
-# Chat example with Jazz and Vue
+# Chat example with Jazz and Svelte
 
 ## Getting started
 
 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.
 
-
 ### Using the example as a template
 
 Create a new Jazz project, and use this example as a template.
+
 ```bash
-npx create-jazz-app@latest chat-vue-app --example chat-vue
+npx create-jazz-app@latest chat-app --example chat-svelte
 ```
 
 Go to the new project directory.
+
 ```bash
-cd chat-vue-app
+cd chat-app
 ```
 
 Run the dev server.
+
 ```bash
 npm run dev
 ```
@@ -29,21 +32,25 @@ npm run dev
 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
 ```
 
 Go to the example directory.
+
 ```bash
-cd jazz/examples/chat-vue/
+cd jazz/examples/chat-svelte/
 ```
 
 Start the dev server.
+
 ```bash
 pnpm dev
 ```
@@ -58,4 +65,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 setting the `sync` parameter of `JazzProvider` in [./src/main.ts](./src/main.ts) to `{ peer: "ws://localhost:4200" }`.
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzSvelteProvider` in [./src/routes/+layout.svelte](./src/routes/+layout.svelte) to `{ peer: "ws://localhost:4200" }`.

examples/chat-svelte/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "chat-svelte",
+  "version": "0.0.89",
+  "type": "module",
+  "private": true,
+  "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:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@types/eslint": "^9.6.1",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.15.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "svelte": "^5.31.1",
+    "svelte-check": "^4.2.1",
+    "typescript": "5.6.2",
+    "typescript-eslint": "^8.32.1",
+    "vite": "6.0.11"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.7",
+    "jazz-tools": "workspace:*",
+    "tailwindcss": "^4.1.7"
+  }
+}

examples/chat-svelte/playwright.config.ts

@@ -0,0 +1,54 @@
+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/chat-svelte/src/apiKey.ts

@@ -0,0 +1 @@
+export const apiKey = 'svelte-chat-example@garden.co';

examples/chat-svelte/src/app.css

@@ -0,0 +1,21 @@
+@import 'tailwindcss';
+@theme {
+  --color-stone-50: oklch(0.988281 0.002 75);
+  --color-stone-75: oklch(0.980563 0.002 75);
+  --color-stone-100: oklch(0.964844 0.002 75);
+  --color-stone-200: oklch(0.917969 0.002 75);
+  --color-stone-300: oklch(0.853516 0.002 75);
+  --color-stone-400: oklch(0.789063 0.002 75);
+  --color-stone-500: oklch(0.726563 0.002 75);
+  --color-stone-600: oklch(0.613281 0.002 75);
+  --color-stone-700: oklch(0.523438 0.002 75);
+  --color-stone-800: oklch(0.412109 0.002 75);
+  --color-stone-900: oklch(0.302734 0.002 75);
+  --color-stone-925: oklch(0.22 0.002 75);
+  --color-stone-950: oklch(0.193359 0.002 75);
+  --color-blue: oklch(0.57 0.2346 261.2);
+}
+
+:focus {
+  @apply outline-hidden;
+}

examples/chat-svelte/src/app.html

@@ -2,8 +2,8 @@
 <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" />
+    <link rel="icon" href="%sveltekit.assets%/jazz-icon.png" type="image/png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">

examples/chat-svelte/src/lib/components/AppContainer.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div
+  class="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-stone-925 dark:text-white"
+>
+  {@render children()}
+</div>

examples/chat-svelte/src/lib/components/BubbleBody.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let { children, fromMe }: { children: Snippet; fromMe: boolean | undefined } = $props();
+</script>
+
+<div
+  class="line-clamp-10 text-ellipsis rounded-2xl overflow-hidden max-w-[calc(100%-5rem)] shadow-sm p-1 {fromMe
+    ? 'bg-white dark:bg-stone-900 dark:text-white'
+    : 'bg-blue text-white'}"
+>
+  {@render children()}
+</div>

examples/chat-svelte/src/lib/components/BubbleContainer.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { children, fromMe }: { children: Snippet; fromMe: boolean | undefined } = $props();
+  const align = fromMe ? 'items-end' : 'items-start';
+</script>
+
+<div class="{align} flex flex-col m-3" role="row">
+  {@render children()}
+</div>

examples/chat-svelte/src/lib/components/BubbleImage.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { ImageDefinition, type Loaded } from 'jazz-tools';
+  import { useProgressiveImg } from '$lib/utils/useProgressiveImage.svelte';
+  let { image }: { image: Loaded<typeof ImageDefinition> } = $props();
+  const { src } = $derived(
+    useProgressiveImg({
+      image
+    })
+  );
+</script>
+
+<img class="h-auto max-h-[20rem] max-w-full rounded-t-xl mb-1" {src} alt="" />

examples/chat-svelte/src/lib/components/BubbleInfo.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { by, madeAt }: { by: string | undefined; madeAt: Date } = $props();
+</script>
+
+<div class="text-xs text-neutral-500 mt-1.5">
+  {by} · {madeAt.toLocaleTimeString()}
+</div>

examples/chat-svelte/src/lib/components/BubbleText.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import type { CoPlainText } from 'jazz-tools';
+
+  let { text, className }: { text: CoPlainText | string | null; className?: string } = $props();
+</script>
+
+<div class="whitespace-pre-wrap"><p class="px-2 leading-relaxed {className}">{text}</p></div>

examples/chat-svelte/src/lib/components/ChatBody.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="flex flex-col-reverse flex-1 overflow-y-auto" role="application">
+  {@render children()}
+</div>

examples/chat-svelte/src/lib/components/ChatBubble.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import BubbleBody from '$lib/components/BubbleBody.svelte';
+  import BubbleContainer from '$lib/components/BubbleContainer.svelte';
+  import BubbleImage from '$lib/components/BubbleImage.svelte';
+  import BubbleInfo from '$lib/components/BubbleInfo.svelte';
+  import BubbleText from '$lib/components/BubbleText.svelte';
+  import type { Message } from '$lib/schema';
+  import type { Account, Loaded } from 'jazz-tools';
+  let {
+    me,
+    msg
+  }: {
+    me: Loaded<typeof Account> | null | undefined;
+    msg: Loaded<typeof Message>;
+  } = $props();
+  const lastEdit = $derived(msg._edits.text);
+  const fromMe = $derived(lastEdit?.by?.isMe);
+  const { text, image } = $derived(msg);
+</script>
+
+{#if me && (!me.canRead(msg) || !msg.text?.toString())}
+  <BubbleContainer fromMe={false}>
+    <BubbleBody fromMe={false}>
+      <BubbleText text="Message not readable" className="italic text-gray-500"></BubbleText>
+    </BubbleBody>
+  </BubbleContainer>
+{:else}
+  <BubbleContainer {fromMe}>
+    <BubbleBody {fromMe}>
+      {#if image}
+        <BubbleImage {image} />{/if}
+      <BubbleText {text} />
+    </BubbleBody>
+    <BubbleInfo by={lastEdit?.by?.profile?.name} madeAt={lastEdit?.madeAt || new Date()} />
+  </BubbleContainer>
+{/if}

examples/chat-svelte/src/lib/components/EmptyChatMessage.svelte

@@ -0,0 +1,3 @@
+<div class="flex items-center justify-center h-full px-3 text-base text-stone-500 md:text-2xl">
+  Start a conversation below.
+</div>

examples/chat-svelte/src/lib/components/ImageIcon.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  let { size = 24, strokeWidth = 2 } = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-image-icon lucide-image"
+  ><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /><circle cx="9" cy="9" r="2" /><path
+    d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+  /></svg
+>

examples/chat-svelte/src/lib/components/ImageInput.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { ChangeEventHandler } from 'svelte/elements';
+
+  import ImageIcon from '$lib/components/ImageIcon.svelte';
+  let { onImageChange }: { onImageChange?: ChangeEventHandler<HTMLInputElement> } = $props();
+
+  let input = $state<HTMLInputElement>();
+
+  const onUploadClick = () => {
+    input?.click();
+  };
+</script>
+
+<button
+  type="button"
+  aria-label="Send image"
+  title="Send image"
+  onclick={onUploadClick}
+  class="text-stone-500 p-1.5 rounded-full hover:bg-stone-100 hover:text-stone-800 dark:hover:bg-stone-800 dark:hover:text-stone-200 transition-colors"
+>
+  <ImageIcon size={24} strokeWidth={1.5} />
+</button>
+
+<label class="sr-only">
+  Image
+  <input
+    bind:this={input}
+    type="file"
+    accept="image/png, image/jpeg, image/gif"
+    onchange={onImageChange}
+  />
+</label>

examples/chat-svelte/src/lib/components/InputBar.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div
+  class="flex gap-1 p-3 mt-auto bg-white border-t shadow-2xl border-stone-200 dark:bg-transparent dark:border-stone-900"
+>
+  {@render children()}
+</div>

examples/chat-svelte/src/lib/components/TextInput.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  let { onSubmit }: { onSubmit: (text: string) => void } = $props();
+  const inputId = $props.id();
+</script>
+
+<div class="flex-1">
+  <label class="sr-only" for={inputId}> Type a message and press Enter </label>
+  <input
+    id={inputId}
+    class="block w-full px-3 py-1 border rounded-full border-stone-200 placeholder:text-stone-500 dark:bg-stone-925 dark:text-white dark:border-stone-900"
+    placeholder="Type a message and press Enter"
+    maxLength={2048}
+    type="text"
+    onkeydown={({ key, currentTarget: input }) => {
+      if (key !== 'Enter' || !input.value) return;
+      onSubmit(input.value);
+      input.value = '';
+    }}
+  />
+</div>

examples/chat-svelte/src/lib/components/TopBar.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div
+  class="flex justify-between w-full gap-2 p-3 bg-white border-b border-stone-200 dark:bg-transparent dark:border-stone-900"
+>
+  {@render children()}
+</div>

examples/chat-svelte/src/lib/schema.ts

@@ -0,0 +1,8 @@
+import { co, z } from 'jazz-tools';
+
+export const Message = co.map({
+  text: co.plainText(),
+  image: z.optional(co.image())
+});
+
+export const Chat = co.list(Message);

examples/chat-svelte/src/lib/utils.ts

@@ -0,0 +1,16 @@
+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-svelte/src/lib/utils/useProgressiveImage.svelte.ts

@@ -0,0 +1,53 @@
+import { ImageDefinition, type Loaded } from 'jazz-tools';
+import { onDestroy } from 'svelte';
+
+export function useProgressiveImg({
+  image,
+  maxWidth,
+  targetWidth
+}: {
+  image: Loaded<typeof ImageDefinition> | null | undefined;
+  maxWidth?: number;
+  targetWidth?: number;
+}) {
+  let current = $state<{
+    src?: string;
+    res?: `${number}x${number}` | 'placeholder';
+  }>();
+  const originalSize = $state(image?.originalSize);
+
+  const unsubscribe = image?.subscribe({}, (update: Loaded<typeof ImageDefinition>) => {
+    const highestRes = ImageDefinition.highestResAvailable(update, { maxWidth, targetWidth });
+    if (highestRes) {
+      if (highestRes.res !== current?.res) {
+        const blob = highestRes.stream.toBlob();
+        if (blob) {
+          const blobURI = URL.createObjectURL(blob);
+          current = { src: blobURI, res: highestRes.res };
+
+          setTimeout(() => URL.revokeObjectURL(blobURI), 200);
+        }
+      }
+    } else {
+      current = {
+        src: update?.placeholderDataURL,
+        res: 'placeholder'
+      };
+    }
+  });
+
+  onDestroy(() => () => {
+    unsubscribe?.();
+  });
+
+  return {
+    get src() {
+      return current?.src;
+    },
+    get res() {
+      return current?.res;
+    },
+
+    originalSize
+  };
+}

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import 'jazz-tools/inspector/register-custom-element';
+
+  import '../app.css';
+  import { JazzSvelteProvider } from 'jazz-tools/svelte';
+  import { apiKey } from '../apiKey';
+  import { getRandomUsername } from '$lib/utils';
+  let { children } = $props();
+  const defaultProfileName = getRandomUsername();
+</script>
+
+<svelte:head>
+  <title>Jazz Chat Example</title>
+</svelte:head>
+
+<div class="h-full bg-white text-stone-700 dark:text-stone-400 dark:bg-stone-925">
+  <JazzSvelteProvider
+    sync={{
+      peer: `wss://cloud.jazz.tools/?key=${apiKey}`
+    }}
+    {defaultProfileName}
+  >
+    {@render children?.()}
+  </JazzSvelteProvider>
+  <jazz-inspector></jazz-inspector>
+</div>
+
+<style>
+  :global(html, body) {
+    margin: 0;
+  }
+</style>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { Chat } from '$lib/schema';
+  import { AccountCoState } from 'jazz-tools/svelte';
+  import { Account, Group } from 'jazz-tools';
+
+  const account = new AccountCoState(Account);
+  const me = $derived(account.current);
+  $effect(() => {
+    if (!me) return;
+    const group = Group.create();
+    group.addMember('everyone', 'writer');
+    const chat = Chat.create([], group);
+    goto(`/chat/${chat.id}`);
+  });
+</script>

examples/chat-svelte/src/routes/chat/[id]/+page.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { createImage } from 'jazz-tools/browser-media-images';
+  import { AccountCoState, CoState } from 'jazz-tools/svelte';
+  import { Account, CoPlainText, type ID } from 'jazz-tools';
+
+  import { page } from '$app/state';
+
+  import { Chat, Message } from '$lib/schema';
+
+  import AppContainer from '$lib/components/AppContainer.svelte';
+  import ChatBody from '$lib/components/ChatBody.svelte';
+  import ChatBubble from '$lib/components/ChatBubble.svelte';
+  import EmptyChatMessage from '$lib/components/EmptyChatMessage.svelte';
+  import ImageInput from '$lib/components/ImageInput.svelte';
+  import InputBar from '$lib/components/InputBar.svelte';
+  import TopBar from '$lib/components/TopBar.svelte';
+  import TextInput from '$lib/components/TextInput.svelte';
+
+  const chatId = $derived(page.params.id) as ID<typeof Chat>;
+  const chat = $derived(
+    new CoState(Chat, chatId, {
+      resolve: {
+        $each: {
+          text: true
+        }
+      }
+    })
+  );
+  const account = new AccountCoState(Account, {
+    resolve: {
+      profile: true
+    }
+  });
+  const me = $derived(account.current);
+  let showNLastMessages = $state(30);
+  const sendImage = (event: Event & { currentTarget: HTMLInputElement }) => {
+    const file = event.currentTarget.files?.[0];
+
+    if (!file || !chat.current) return;
+
+    if (file.size > 5000000) {
+      alert('Please upload an image less than 5MB.');
+      return;
+    }
+
+    createImage(file, { owner: chat.current._owner }).then((image) => {
+      if (!chat.current) return;
+      chat.current.push(
+        Message.create(
+          {
+            text: CoPlainText.create(file.name, chat.current._owner),
+            image: image
+          },
+          chat.current._owner
+        )
+      );
+    });
+  };
+</script>
+
+<AppContainer>
+  <TopBar>
+    <input
+      type="text"
+      value={me?.profile?.name ?? ''}
+      class="bg-transparent"
+      onchange={(e) => {
+        if (!me?.profile) return;
+        const target = e.target as HTMLInputElement;
+        me.profile.name = target.value;
+      }}
+      placeholder="Set username"
+    />
+    <button
+      onclick={() => {
+        account.logOut();
+        window.location.reload(); // Otherwise the provider will not update with default profile name
+      }}>Log out</button
+    >
+  </TopBar>
+  {#if !chat}
+    <div class="flex items-center justify-center flex-1">Loading...</div>
+  {:else}
+    <ChatBody>
+      {#if chat.current && chat.current.length > 0}
+        {#each chat.current.slice(-showNLastMessages).reverse() as msg (msg.id)}
+          <ChatBubble {me} {msg} />
+        {/each}
+      {:else}
+        <EmptyChatMessage />
+      {/if}
+      {#if chat.current && chat.current.length > showNLastMessages}
+        <button
+          class="block px-4 py-1 mx-auto my-2 border rounded"
+          onclick={() => (showNLastMessages += 10)}
+        >
+          Show more
+        </button>
+      {/if}
+    </ChatBody>
+    <InputBar>
+      <ImageInput onImageChange={sendImage} />
+      <TextInput
+        onSubmit={(text: string) => {
+          if (!chat.current) return;
+          chat.current.push(
+            Message.create(
+              { text: CoPlainText.create(text, chat.current._owner) },
+              chat.current._owner
+            )
+          );
+        }}
+      />
+    </InputBar>
+  {/if}
+</AppContainer>

examples/chat-svelte/tests/chat.spec.ts

@@ -0,0 +1,39 @@
+import { ChatPage } from './pages/ChatPage';
+import { test } from '@playwright/test';
+
+test('chat works between two windows', async ({ page: marioPage, browser }) => {
+  await marioPage.goto('/');
+  const context = await browser.newContext();
+  const luigiPage = await context.newPage();
+
+  await marioPage.waitForURL('/chat/**');
+  const roomUrl = marioPage.url();
+  await luigiPage.goto(roomUrl);
+
+  const marioChat = new ChatPage(marioPage);
+  const luigiChat = new ChatPage(luigiPage);
+
+
+  await marioChat.setUsername('Mario');
+
+  const message1ByMario = 'Hello Luigi, are you ready to save the princess?';
+
+  await marioChat.sendMessage(message1ByMario);
+  await marioChat.expectMessageRow(message1ByMario);
+
+  const roomURL = marioPage.url();
+  await luigiPage.goto(roomURL);
+
+  await luigiChat.setUsername('Luigi');
+
+  await luigiChat.expectMessageRow(message1ByMario);
+
+  const message2ByLuigi = "No, I'm not ready yet. I'm still trying to find the key to the castle.";
+
+  await luigiChat.sendMessage(message2ByLuigi);
+  await luigiChat.expectMessageRow(message2ByLuigi);
+
+  await marioChat.expectMessageRow(message1ByMario);
+  await luigiChat.expectMessageRow(message2ByLuigi);
+  await context.close();
+});

examples/chat-svelte/tests/pages/ChatPage.ts

@@ -0,0 +1,41 @@
+import { type Locator, type Page, expect } from '@playwright/test';
+
+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', {
+      name: 'Type a message and press Enter'
+    });
+    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) {
+    await this.messageInput.fill(message);
+    await this.messageInput.press('Enter');
+  }
+
+  async expectMessageRow(message: string) {
+    await expect(this.page.getByText(message)).toBeVisible();
+  }
+
+  async expectUserNameNotToBeAnonymousUser() {
+    await expect(this.usernameInput).not.toHaveValue(/anonymous user/i);
+    await expect(this.usernameInput).toHaveValue(/^Anonymous \w+/);
+  }
+
+  async logout() {
+    await this.logoutButton.click();
+    await this.page.goto('/');
+  }
+}

examples/chat-svelte/vite.config.ts

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

examples/chat-vue/.gitignore

@@ -1 +0,0 @@
-dist

examples/chat-vue/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

examples/chat-vue/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz Chat Vue Example</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

examples/chat-vue/package.json

@@ -1,38 +0,0 @@
-{
-  "name": "chat-vue",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build-type-check": "run-p type-check \"build {@}\" --",
-    "preview": "vite preview",
-    "build": "vite build",
-    "type-check": "vue-tsc --build --force",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write"
-  },
-  "dependencies": {
-    "jazz-browser": "workspace:*",
-    "jazz-tools": "workspace:*",
-    "jazz-vue": "workspace:*",
-    "vue": "^3.5.11",
-    "vue-router": "^4.4.5"
-  },
-  "devDependencies": {
-    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^22.5.1",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.7.0",
-    "eslint-plugin-vue": "^9.28.0",
-    "npm-run-all2": "^6.2.3",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
-    "typescript": "5.6.2",
-    "vite": "6.3.5",
-    "vite-plugin-vue-devtools": "^7.4.6",
-    "vue-tsc": "^2.1.6"
-  }
-}

examples/chat-vue/postcss.config.js

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

examples/chat-vue/src/App.vue

@@ -1,17 +0,0 @@
-<template>
-  <AppContainer>
-    <TopBar v-if="me">
-      <p>{{ me.profile?.name }}</p>
-      <button @click="logOut">Log out</button>
-    </TopBar>
-    <router-view />
-  </AppContainer>
-</template>
-
-<script setup lang="ts">
-import { useAccount } from "jazz-vue";
-import AppContainer from "./components/AppContainer.vue";
-import TopBar from "./components/TopBar.vue";
-
-const { me, logOut } = useAccount();
-</script>

examples/chat-vue/src/apiKey.ts

@@ -1 +0,0 @@
-export const apiKey = "chat-example-jazz@garden.co";

examples/chat-vue/src/assets/base.css

@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

examples/chat-vue/src/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

examples/chat-vue/src/assets/main.css

@@ -1,35 +0,0 @@
-@import "./base.css";
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

examples/chat-vue/src/components/AppContainer.vue

@@ -1,13 +0,0 @@
-<template>
-  <div
-    class="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-black dark:text-white"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  name: "AppContainer",
-};
-</script>

examples/chat-vue/src/components/BubbleBody.vue

@@ -1,13 +0,0 @@
-<template>
-  <div
-    class="rounded-2xl text-sm line-clamp-10 text-ellipsis bg-white max-w-full whitespace-pre-wrap dark:bg-stone-700 dark:text-white py-1 px-3 shadow-sm"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  name: "BubbleBody",
-};
-</script>

examples/chat-vue/src/components/BubbleContainer.vue

@@ -1,22 +0,0 @@
-<template>
-  <div :class="[alignClass, 'flex flex-col m-2']" role="row">
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  name: "BubbleContainer",
-  props: {
-    fromMe: {
-      type: Boolean,
-      default: undefined,
-    },
-  },
-  computed: {
-    alignClass() {
-      return this.fromMe ? "items-end" : "items-start";
-    },
-  },
-};
-</script>

examples/chat-vue/src/components/BubbleInfo.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="text-xs text-neutral-500 mt-1.5">
-    {{ by }} · {{ formattedTime }}
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from "vue";
-
-export default defineComponent({
-  name: "BubbleInfo",
-  props: {
-    by: {
-      type: String,
-      default: "",
-    },
-    madeAt: {
-      type: Date,
-      required: true,
-    },
-  },
-  setup(props) {
-    const formattedTime = computed(() => props.madeAt.toLocaleTimeString());
-    return {
-      formattedTime,
-    };
-  },
-});
-</script>

examples/chat-vue/src/components/ChatBody.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="flex-1 overflow-y-auto flex flex-col-reverse" role="application">
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  name: "ChatBody",
-};
-</script>

examples/chat-vue/src/components/ChatBubble.vue

@@ -1,35 +0,0 @@
-<template>
-  <BubbleContainer :fromMe="lastEdit.by?.isMe">
-    <BubbleBody>{{ msg.text }}</BubbleBody>
-    <BubbleInfo :by="lastEdit.by?.profile?.name" :madeAt="lastEdit.madeAt" />
-  </BubbleContainer>
-</template>
-  
-  <script lang="ts">
-import { computed, defineComponent } from "vue";
-import BubbleBody from "./BubbleBody.vue";
-import BubbleContainer from "./BubbleContainer.vue";
-import BubbleInfo from "./BubbleInfo.vue";
-
-export default defineComponent({
-  name: "ChatBubble",
-  components: {
-    BubbleContainer,
-    BubbleBody,
-    BubbleInfo,
-  },
-  props: {
-    msg: {
-      type: Object,
-      required: true,
-    },
-  },
-  setup(props) {
-    const lastEdit = computed(() => props.msg._edits.text);
-    return {
-      lastEdit,
-    };
-  },
-});
-</script>
-  

examples/chat-vue/src/components/ChatInput.vue

@@ -1,40 +0,0 @@
-<template>
-  <div
-    class="p-3 bg-white border-t shadow-2xl mt-auto dark:bg-transparent dark:border-stone-800"
-  >
-    <label class="sr-only" :for="inputId">Type a message and press Enter</label>
-    <input
-      :id="inputId"
-      v-model="inputValue"
-      class="rounded-full py-2 px-4 text-sm border block w-full dark:bg-black dark:text-white dark:border-stone-700"
-      placeholder="Type a message and press Enter"
-      maxlength="2048"
-      @keydown.enter.prevent="submitMessage"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-
-export default defineComponent({
-  name: "ChatInput",
-  emits: ["submit"],
-  setup(_, { emit }) {
-    const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
-    const inputValue = ref("");
-
-    function submitMessage() {
-      if (!inputValue.value) return;
-      emit("submit", inputValue.value);
-      inputValue.value = "";
-    }
-
-    return {
-      inputId,
-      inputValue,
-      submitMessage,
-    };
-  },
-});
-</script>

examples/chat-vue/src/components/EmptyChatMessage.vue

@@ -1,13 +0,0 @@
-<template>
-  <div
-    class="h-full text-base text-stone-500 flex items-center justify-center px-3 md:text-xl"
-  >
-    Start a conversation below.
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  name: "EmptyChatMessage",
-};
-</script>

examples/chat-vue/src/components/TopBar.vue

@@ -1,13 +0,0 @@
-<template>
-  <div
-    class="p-3 bg-white w-full flex justify-end gap-1 text-xs border-b dark:bg-transparent dark:border-stone-800"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  name: "TopBar",
-};
-</script>

examples/chat-vue/src/index.css

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

examples/chat-vue/src/main.ts

@@ -1,36 +0,0 @@
-import { DemoAuthBasicUI, JazzProvider } from "jazz-vue";
-import { createApp, defineComponent, h } from "vue";
-import App from "./App.vue";
-import "./index.css";
-import { apiKey } from "@/apiKey";
-import router from "./router";
-
-const RootComponent = defineComponent({
-  name: "RootComponent",
-  setup() {
-    return () =>
-      h(
-        JazzProvider,
-        {
-          sync: {
-            peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
-          },
-        },
-        h(
-          DemoAuthBasicUI,
-          {
-            appName: "Jazz Vue Chat",
-          },
-          {
-            default: () => h(App),
-          },
-        ),
-      );
-  },
-});
-
-const app = createApp(RootComponent);
-
-app.use(router);
-
-app.mount("#app");